如何在FormGroups中验证FormArray

Question

如何在一个FormGroup中验证每个FormArray？这里我有一个定制的验证器：

export class GridProcessorValidator {

  static validateGroupItem(definition: ObjectDefinition) {
      return function(control: AbstractControl): ValidatorFn {
          return null;
      };
  }

}

以下是表格：

this.gridProcessorForm = this.fb.group({
    propertiesSide: new FormControl(),
    objectNamesSide: new FormControl(),
    groupItems: this.fb.array([], validateGroupItem(this.myCollection))   // array of form groups that needs custom validation
});

如何在自定义验证器FormGroups中访问definitionPropertiesMatched的值，以便检查它，然后将其打印到无效的单个FormGroups模板中？

模板：

*ngFor="let item of gridProcessorForm.get('groupItems').controls; let i=index"
                    [formGroupName]="i"> ...

然后我有表单字段访问器：

{{item.get('propertyName').value}}

有没有方法可以获得迭代器中的项(FormGroup)的任何错误？

Answer 1

如果你写

this.fb.array([], validateGroupItem(this.myCollection))

您将验证整个formArray，然后您的验证器函数可以像

static validateGroupItem(definition: ObjectDefinition) {
      return function(control: FormArray): ValidatorFn {
          return null;
      };
  }

如果您希望在数组的每一组上都有一个验证器，则需要在将formGroup推到数组中时添加验证器。

createGroup()
{
    return this.fb.group({
      name:''
      surname:''
    },validateGroupItem(this.myCollection))
}

你用

this.gridProcessorForm.get('groupItems') as FormArray.push(this.createGroup())

或

this.gridProcessorForm = this.fb.group({
    propertiesSide: new FormControl(),
    objectNamesSide: new FormControl(),
    groupItems: this.fb.array([this.createGroup(),this.createGroup()]
});

Answer 2

在html内部，通过循环模板输入变量访问每个表单组状态，在您的示例中是“item”：

   *ngFor="let item of gridProcessorForm.get('groupItems').controls; let i=index"
                    [formGroupName]="i"> 
      ...

   <div *ngIf="item.invalid" class="text-danger"> Invalid !</div> 
      ...