angular - 如何以角度访问 *ngFor 中的 FormGroup 的 formArray？

Question

我正在使用使用 FormArray 的嵌套 FormControl。我的表格是这样的：

let form = new FormGroup({
   name: new FormControl(),
   email: new FormControl(),
   Addresses : new FormArray([
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      }),
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
   ])
})



addNewAddress() {
   let newAddress = new FormGroup({
      building: new FormControl(),
      society : new FormControl(),
   });
   this.form.get("addresses").push(newAddress)
}

并在 HTML 模板中

<div *ngFor="let controlGroup of form.get('addresses').controls; let i=index">
   <ng-container [formGroup]="controlGroup">
     <input type="text" formControlName="building" />
     <input type="text" formControlName="society" />
   </ng-container>
</div>

**但上述代码返回Build Error的控件在 abstractControl 上不存在。**

所以我转换form.get('addresses')成FormControl使用这个getter Melthod。

get addressArray() : FormArray {
    return form.get('addresses') as FormArray
}
//And use it in HTML like this

<div *ngFor="let controlGroup of addressArray.controls; let i=index">
   <ng-container [formGroup]="controlGroup">                             <== now here is build error
     <input type="text" formControlName="building" />
     <input type="text" formControlName="society" />
   </ng-container>
</div>

在那次转换之后。新的构建错误引发了controlGroup does not contain this methods : addControl, removeCotnrol and ...

因为addressArray.**controls**返回数组而abstractControl不是指令需要。FormControl[formGroup]FormControl

我怎样才能*ngFor像这样定义类型：

let (controlGroup: FormControl) of addressArray.controls; let i=index

这可能吗？

请帮我。

Answer 1

您可以像使用 Type 一样使用它addressArray.controls

这是完整的代码：

let form = new FormGroup({
   name: new FormControl(),
   email: new FormControl(),
   Addresses : new FormArray([
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      }),
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
      new FormGroup({
         building: new FormControl(),
         society : new FormControl(),
      })
   ])
})



addNewAddress() {
   let newAddress = new FormGroup({
      building: new FormControl(),
      society : new FormControl(),
   });
   this.form.get("addresses").push(newAddress)
}

get addressArray() : FormArray {
    return form.get('addresses') as FormArray
}

get addressControlsArray() : FormGroup[] {
    return this.addressArray.controls as FormGroup[]
}

在 HTML 中

<div *ngFor="let controlGroup of addressControlsArray; let i=index">
   <ng-container [formGroup]="controlGroup">
     <input type="text" [formControlName]="building" />
     <input type="text" [formControlName]="society" />
   </ng-container>
</div>

您可以遍历所有 formField 以clear all it's validator喜欢这样：

nestedFormFieldIterator(formGroup: FormGroup | FormArray, action: "ClearValidation" | "MarkAsDirty"): void {
    Object.keys(formGroup.controls).forEach(key => {
      const control = formGroup.controls[key] as FormControl | FormGroup | FormArray;
      if (control instanceof FormControl) {
        // console.log(`Clearing Validators of ${key}`);
        if (action == "ClearValidation") {
          control.clearValidators();
        }
        if (action == "MarkAsDirty") {
          control.markAsDirty();
        }
        control.updateValueAndValidity();
      } else if (control instanceof FormGroup || control instanceof FormArray) {
        // console.log(`control '${key}' is nested group or array. calling clearValidators recursively`);
        this.nestedFormFieldIterator(control, action);
      }
    });
  }