Angular 表单 - 在子组件模板中访问 FormArray

Question

我有一个组件需要几个 FormControl 和 FormArray 作为输入。我正在像这样从子组件访问 FormControls：

[formControl]="control"

这很好用，但我找不到用 FormArray 做同样事情的方法。似乎没有针对它的指令。如果可能的话，我想避免传入一堆字符串并通过 formControlName 和 formArrayName 进行访问。有办法吗？

Answer 1

更新出现类型错误，已更正

您可以像使用 FormGroup 一样使用 FormArray，但要小心使用 "notation"，如果通常我们使用 [formGroup]="i"，现在我们使用 [formGroup]="group".

才想到什么是myFormArray.controls

<form [formGroup]="myFormArray">
  <div *ngFor="let group of myFormArray.controls;let i=index" [formGroup]="group">
    <input formControlName="prop1">
    <div *ngIf="group.get('prop1').invalid">Prop1 Required</div>
    <input formControlName="prop2"/>
    <div *ngIf="group.get('prop2').invalid">Prop2 Required</div>
  </div>
</form>

myFormArray=new FormArray([
    new FormGroup({
      prop1:new FormControl('',Validators.required),
      prop2:new FormControl('',Validators.required)
    })
  ])

如果你的 formArray 是控件的 FormArray，直接使用 formControl

<form [formGroup]="myFormArray2">
  <div *ngFor="let group of myFormArray2.controls">
    <input [formControl]="group">
    <div *ngIf="group.invalid">Required</div>
  </div>
</form>

myFormArray2=new FormArray([
    new FormControl('',Validators.required),
    new FormControl('',Validators.required)
  ])

参见stackblitz

Angular 表单 - 在子组件模板中访问 FormArray

Angular forms - access FormArray in child component template

angular

angular-reactive-forms