angular - 无法找到路径“myFormArray -> [index] -> myProperty”的控件

Question

我正在尝试使用 Angular ReactiveForms 生成动态表单。 目前，我收到错误无法找到路径为“myFormArray -> [index] -> myProperty”的控件。我已经检查过在互联网上找到的一些答案但没有成功。这是我的代码:

HTML:

<form [formGroup]="myForm">
    <div formArrayName="myFormArray" *ngFor="let ctrl of foo.controls; let i=index">
        <div [formGroupName]="i">
            <input matInput type="text" formControlName="myProperty">
        </div>
    </div>
</form>

TS:

export class MyClass implements OnChanges {

  @Input() myData: any;

  myForm: FormGroup;

  get foo(): FormArray{
    return <FormArray>this.myForm.get('myFormArray');
  }

  constructor(private fb: FormBuilder) { }

  ngOnChanges() {
    if (!this.myForm) {
      this.myForm = this.fb.group({
        myFormArray: this.fb.array([this.buildMyFormArray()])
      });
    }

    this.myForm.setControl('myFormArray', this.fb.array(myData || []));
  }

  buildMyFormArray(): FormGroup {
    return this.fb.group({
      myProperty: ''
    });
  }
}

myData 来自父级作为组件中的输入，它看起来像

myData: [
    { myProperty: 'John Doe' },
    { myProperty: 'Jane Doe' },
    { myProperty: 'Jack Doe' }
]

数据数组中的每个项目更改中间的索引都会发生错误。

你能帮我吗？ 谢谢

Answer 1

您的 myFormArray 控件应该是 FormGroup 的 FormArray，但您正在创建 FormArray FormControls。

所以让我们尝试以下操作:

this.myForm.setControl('myFormArray', 
   this.fb.array((this.myData || []).map((x) => this.fb.group(x))));

<强> Ng-run Example