无法在 FormGroup 中存储动态 FormArray
Posted
技术标签:
【中文标题】无法在 FormGroup 中存储动态 FormArray【英文标题】：Not able to store dynamic FormArray in FormGroup 【发布时间】：2019-05-02 22:35:19 【问题描述】：我有一个 FormGroup，它有三个 FormControl 字段和一个 FormArray 字段，如下图所示。要求是从用户那里获取经理姓名，一旦按下添加按钮，经理详细信息应显示在表格中。在表格中提供了一个删除按钮，当按下删除按钮时，管理器应该从表格和列表中删除。提交表单时，应保存管理员列表。除了 formArray 逻辑之外，一切正常。
我试图在网上找到解决方案（点击各种链接：-https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/， Angular 4 Form FormArray Add a Button to add or delete a form input row)，但没有多大帮助。关于如何在formGroup中存储formArray的资料不多。请提出建议。
下面是我的代码，请看一下：-
1. manager-create-modal.component.html
<div>
<form [formGroup]="createForm" (ngSubmit)="onFormCreation()">
<div class="row">
<div class="column">
<div class="form-inline">
<div class="form-group">
<label for="remote_access_method">Remote Access Method: <font color="orange"> *</font> </label>
<input type="text" size='38' class="form-control" formControlName="remote_access_method" >
</div>
</div>
<br>
<div class="form-inline">
<div class="form-group">
<label for="status">Current Status: <font color="orange"> *</font> </label>
<input type="text" size='38' class="form-control" formControlName="status">
</div>
</div>
<br>
<div class="form-inline">
<div class="form-group">
<label for="secregid">Registration ID:<font color="orange"> *</font> </label>
<input type="text" size='38' class="form-control" formControlName="secregid">
</div>
</div>
<br><br>
<div class="form-inline">
<div class="form-group">
<br><br>
<div formArrayName="manager_formArray">
Enter name: <input type="text" class="form-control" formControlName="MgrName" size='50' >
<button type="button" class="btn btn-primary btn-sm" (click)="addPM()">Add</button>
<br><br>
<table class="table table-hover">
<tr><th>#</th><th>Manager Name</th><th>Remove</th></tr>
<tr *ngFor="let pm of createForm.get('manager_formArray').value; let id = index">
<td>id+1</td>
<td>pm.MgrName</td>
<td>
<span class="table-remove">
<button type="button" class="btn btn-primary btn-sm" (click)="removeMgr(id)">Remove</button>
</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<br>
</div>
<br><br>
<div class="form-group">
<button class="btn btn-primary">Submit</button>
</div>
</form>
</div>
2。 manager-create-modal.component.ts
import Component, OnInit from '@angular/core';
import FormGroup, FormBuilder, FormArray, FormControl, Validators from '@angular/forms';
@Component(
selector: 'app-manager-create-modal',
templateUrl: './manager-create-modal.component.html',
styleUrls: ['./manager-create-modal.component.css']
)
export class ManagerCreateModalComponent implements OnInit
createForm: FormGroup;
manager_formArray: FormArray;
remote_access_method: FormControl;
status: FormControl;
secregid: FormControl;
constructor(private formBuilder: FormBuilder)
createFormControls()
this.remote_access_method = new FormControl('');
this.status = new FormControl('');
this.secregid = new FormControl('');
this.manager_formArray = new FormArray([ this.createItem() ]);
createItem(): FormGroup
return this.formBuilder.group(
MgrName: ''
);
createFormVariables()
this.createForm = new FormGroup(
remote_access_method : this.remote_access_method,
status : this.status,
secregid : this.secregid,
manager_formArray: this.manager_formArray,
)
ngOnInit()
this.createFormControls();
this.createFormVariables();
addPM(mgr: any): void
console.log("inside addPM");
this.manager_formArray.push(this.formBuilder.group(MgrName:''));
console.log("list after addition:"+this.manager_formArray.value);
for(let i = 0; i < this.manager_formArray.length; i++)
console.log(this.manager_formArray.at(i).value);
get managerFormArray()
return this.manager_formArray.get('MgrName') as FormArray;
onFormCreation()
console.log("success")
经理姓名未显示在表格中，我不断收到以下错误：-
错误错误：找不到带有路径的控件：'manager_formArray -> MgrName' 在 setUpControl 的 _throwError (forms.js:1731) (forms.js:1639) 在 FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4456) 在 FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4961) 在 FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4911) 在 checkAndUpdateDirectiveInline (core.js:9031) 在 checkAndUpdateNodeInline (core.js:10299) 处 checkAndUpdateNode (core.js:10261) 在 debugCheckAndUpdateNode (core.js:10894) 在 debugCheckDirectivesFn (core.js:10854) 里面 添加PM manager-create-modal.component.ts:50 list after 补充：[对象对象]，[对象对象] manager-create-modal.component.ts:53 MgrName: "" manager-create-modal.component.ts:53 MgrName: ""
我什至不明白为什么没有将元素添加到 manager_formArray。请帮帮我。
【问题讨论】：
你忘记了 [formGroupName]="i" in [formGroupName]="i " > @Eliseo 感谢Eliseo，但我仍然遇到同样的错误.. 按添加按钮时是否收到错误消息？你能控制台记录addPM-method 中的所有内容吗？
您正在创建许多FormGroups，在其中的每个控制器上使用相同的键MgrName。我不确定这是否是一个问题，但您可以尝试在每次创建FormGroup 时使用不同的密钥，也许将id 添加到名称中？我不确定这是否重要。只是一个想法
@John 按下添加按钮时我没有收到错误消息。它导航到 addPM() 方法，但没有任何内容添加到 manager_formArray。获取以下console.log消息：-添加后在addPM manager-create-modal.component.ts:50列表中：[object Object],[object Object],[object Object] manager-create-modal.component.ts:53 MgrName: "" manager-create-modal.component.ts:53 MgrName: "" manager-create-modal.component.ts:53 MgrName: ""
【参考方案1】：
您有一些问题。首先，最好将在FormArray 之外添加更多FormGroups 的输入移到<div formArrayName="manager_formArray">- 元素之外。为此，我创建了一个新的 FormControl this.mgrNameInput = new FormControl('');（有关详细信息，请参阅 StackBlitz）。
您还需要在按下Add-按钮时将消息添加到新条目中，调用addPM()-方法：
addPM() // removed the argument, using the controller inside the method instead.
this.manager_formArray.push(this.formBuilder.group(MgrName:this.mgrNameInput.value));
this.mgrNameInput.reset(); // reset the input field.
我在删除条目时也添加了 remove-method。
removeMgr(index: number)
this.manager_formArray.removeAt(index);
完整示例请查看StackBlitz
【讨论】：
非常感谢！！经理已成功添加到 manager_formArray。我试图在一个 formArray 变量上做所有事情，没想到像你一样使用另一个 formControl 变量。 还有一件事请 - 如何清除输入名称：按下添加按钮后的输入框？输入框未清空。 在addPm()方法的底部添加this.mgrNameInput.reset();
我已经接受了答案。它将在 21 小时后有资格获得奖励。启用后将获得奖励。以上是关于无法在 FormGroup 中存储动态 FormArray的主要内容，如果未能解决你的问题，请参考以下文章
Angular2 - 无法绑定到“formGroup”，因为它不是“form”的已知属性
无法绑定到“formGroup”，因为它不是 Angular 中“form”的已知属性