[英]ERROR Error: formArrayName must be used with a parent formGroup directive
我正在為我的一個項目使用反應形式數組。 我正在嘗試制作一個動態表單,在按鈕單擊時添加/刪除字段。 我的代碼中出現以下錯誤
ERROR 錯誤:formArrayName 必須與父 formGroup 指令一起使用。 您需要添加一個 formGroup 指令並將現有的 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>
添加父表單組:
<div class="col-md-6" [formGroup]="communicationForm">
我唯一要更改的另一件事是為這些項目添加一個吸氣劑:
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>
當我們在我們使用的 formGroup 中沒有關閉 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.