错误 错误:formArrayName 必须与父 formGroup 指令一起使用

Question

我正在为我的一个项目使用反应式表单数组。我正在尝试制作一个动态表单，该表单在单击按钮时添加/删除字段。我在代码中收到以下错误

错误错误：formArrayName 必须与父 formGroup 指令一起使用。 您需要添加表单组 指令并向其传递现有的表单组实例

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

public communicationForm: FormGroup;
public items: FormArray;
createItem(): FormGroup {
return this.fb.group({
communicationType: [''],
communicationValue: ['']
});
}
addItem(): void {
// this.items = this.communicationForm.get('items') as FormArray;
this.items.push(this.createItem());
}
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.communicationForm = this.fb.group({
items: this.fb.array([this.createItem()])
}),
this.items = this.communicationForm.get('items') as FormArray;
}

<div class="col-md-6">
<h3>Communications</h3>
<div formArrayName="items" *ngFor="let item of communicationForm.get('items').controls; let i = index;">
<div [formGroupName]="i">
<select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
<option value="" disabled>Communications</option>
<option *ngFor="let communication of Communications" [ngValue]="communication.id">
{{communication.name}}
</option>
</select>
</div>
<div [formGroupName]="i">
<input type="text" class="col-md-6" formControlName="communicationValue">
</div>
<div [formGroupName]="i">
<i class="fa fa-plus-circle" (click)="addItem()"></i>
</div>
</div>
</div>

Answer 1

添加父窗体组：

<div class="col-md-6" [formGroup]="communicationForm">

我要更改的唯一另一件事是为项目添加一个 getter：

TS

get items(): FormArray {
return this.communicationForm.get('items') as FormArray;
}

ngOnInit是：

ngOnInit() {
this.communicationForm = this.fb.group({
items: this.fb.array([this.createItem()])
})
}

.HTML

<div class="col-md-6">
<h3>Communications</h3>
<div formArrayName="items" *ngFor="let item of items.controls; let i = index;">
<div [formGroupName]="i">
<select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
<option value="" disabled>Communications</option>
<option *ngFor="let communication of Communications" [ngValue]="communication.id">
{{communication.name}}
</option>
</select>
</div>
<div [formGroupName]="i">
<input type="text" class="col-md-6" formControlName="communicationValue">
</div>
<div>
<i class="fa fa-plus-circle" (click)="addItem()"></i>
</div>
</div>
</div>

Answer 2

当我们在我们使用的表单组中有一个 FormArray 未关闭时

<form [formGroup]="items">
<!--see that iterate over items.controls-->
<!-- and create a formGroup= the variable -->
<div *ngFor="let group of items.controls" [formGroup]="group">
<input formControlName="communicationType">
<input formControlName="communicationValue">
</div>
</form>