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

我认为您的表单初始化错误。请尝试以下操作：

documentationForm: FormGroup;
documentationArray: FormArray;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {

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

}

Answer 2

问题是您正在使用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>

如何在HTML中迭代FormArray？

2 个答案: