ERROR 错误:formArrayName 必须与父 formGroup 指令一起使用
Posted
技术标签:
【中文标题】ERROR 错误:formArrayName 必须与父 formGroup 指令一起使用【英文标题】:ERROR Error: formArrayName must be used with a parent formGroup directive 【发布时间】:2020-02-06 11:13:24 【问题描述】:我正在为我的一个项目使用响应式数组。我正在尝试制作一个动态表单,在按钮单击时添加/删除字段。我的代码中出现以下错误
错误错误: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>
【问题讨论】:
【参考方案1】:添加一个父表单组:
<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>
【讨论】:
不,您不能将 FormArray 包含在 FormGroup 中 嗯,是的,您可以,并且应该基于 OP 示例:) ::glups:: 抱歉,当我看到一个只有一个 formArray 的 formGroup 时,我有一个“tick”【参考方案2】:当我们使用的 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>
【讨论】:
以上是关于ERROR 错误:formArrayName 必须与父 formGroup 指令一起使用的主要内容,如果未能解决你的问题,请参考以下文章
formGroupName 必须与父 formGroup 指令一起使用
在 Angular 2 中,响应式表单不使用 ngModel 和 formArrayName 更新值
嵌套的自定义 FormArray 组件不与具有 FormArrayName 的子表单绑定
致命错误 C1189:#error:core.hpp 标头必须编译为 C++
我收到此错误 [Semantical Error] line 0, col 73 near 'classes LIKE': Error: Invalid PathExpression.必须是 Stat
“SpotifyOauthError:错误:invalid_request,error_description:必须提供代码”当我输入 URL