无法通过路径'myFormArray - > [index] - > myProperty找到控件

Question

我正在尝试使用Angular ReactiveForms生成动态表单.目前我收到错误Cannot find control with path '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控制应该是一个FormArray的FormGroup秒,但你要创建FormArray的FormControl秒.

那么让我们尝试以下方法:

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

Ng-run示例