[英]how to disable a form element of formArray in reactive formGroup using Angular5
[英]How to create a Reactive Form using only FormArray using Angular6?
我有一个表,可以动态构造行,如下所示
<form [formGroup]='employeeForm'>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">name</th>
<th scope="col">contact details</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let details of employeeDetails'>
<th formControlName='name' scope="row">{{details.name}}</th>
<td formControlName='employeeName'>{{details.contactDetails}}</td>
</tr>
</tbody>
</table>
</form>
现在,如何将动态创建的控件附加到表单? 我尝试了这个
employeeForm: FormGroup
constructor(private formbuilder: FormBuilder) { }
ngOnInit() {
this.employeeForm = this.formbuilder.array([])
}
但这给了我错误提示,formGroup不能包含formArray
如何使用反应式表单方法将formArray添加到formGroup中?
Akber Iqbal在其评论中链接到的示例可以通过FormBuilder实现。 在没有FormBuilder的情况下,查看类型如何匹配可能会更容易。 FormControl
代表html中的实际表单元素(输入,文本区域等)。 FormGroup
和FormArray
都是容纳FormGroups,FormArrays和/或FormControls的容器。 构造FormGroup或FormArray时,将传入其初始子控件。
在父FormGroup下,employeeForm包含一个FormArray。 我将两个默认的子FormControls添加到FormArray:
employeeForm: FormGroup;
nameArray: FormArray;
ngOnInit(){
this.nameArray = new FormArray([
new FormControl('name1'),
new FormControl('name2')
]);
this.employeeForm = new FormGroup({
employeeNameArray: this.nameArray
});
}
在模板中,您应该能够遍历FormArray的子级
<tr *ngFor="let employeeName of nameArray.controls; let i=index">
<td>Name: <input type="text" [formControlName]="i"></td>
</tr>
如果您希望每个员工拥有多个表单元素(一个用于名称,一个用于地址),则可能需要再一层嵌套,其中FormArray的直接子级是FormGroup,然后每个子组包含一个名称FormControl和一个地址FormControl 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.