如何在 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的formArray：this.formBuilder.array([])，但是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])
     });

}