如何在HTML中迭代FormArray？

Question

我试图在Angular中设置一个简单的FormArray，并且很难让它工作。

我错过了什么？

documentationForm: FormGroup;
documentationArray: FormArray;
defaultDocumentation = 1;

ngOnInit() {
    this.documentationForm = this.formBuilder.group({
       id: this.formBuilder.array([])
    });
}

将文件添加到上传器组件时，我调用以下内容：

fileAddedToQueue(file) {
    this.documentationArray = this.documentationForm.get('id') as FormArray;
    this.documentationArray.push(this.addDocumentType());
}

private addDocumentType(): FormGroup {
    return this.formBuilder.group({ id: this.defaultDocumentation });
}

我放了一堆console.log，它似乎按预期工作但我无法使用我的HTML。

<div formArrayName="id" *ngFor="let file of documentationForm.get('id').controls; let i = index" [formGroupName]="i">
    test
</div>

我得到以下内容：

Unhandled application error. Error: Cannot find control with name: 'id'

我究竟做错了什么？从我所看到的一切似乎都是正确的。

Answer 1

问题是你正在使用id：this.formBuilder.array（[]）定义formArray，但是formArray中应该有一个控件。

正确的方法是id：this.formBuilder.array（[this.formBuilder.control（''）]）

同样在this.formBuilder.array里面直接有this.formBuilder.control，你不应该在html中使用formGroup。正确的方法是：

<div formArrayName="id">
  <div *ngFor="let item of id.controls; let i=index">
      <input type="text" [formControlName]="i">
  </div>
</div>

Answer 2

我认为你的表单初始化是错误的。请试试这个：

documentationForm: FormGroup;
documentationArray: FormArray;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {

    this.documentationForm = this.formBuilder.group({
        id: this.formBuilder.array([this.documentationArray])
     });

}