[英]Angular 2: Can't add form group to form array in reactive Forms
我正在构建动态表单并希望“即时”添加表单组。
这是我几乎可以工作的代码:
import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, FormArray, Validators, FormControl} from "@angular/forms";
export class CombinedComponent implements OnInit {
ltsForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.ltsForm = this.initFormGroup();
// init products
for (let i = 0; i < 3; i++) { // add dynamically products
this.addProduct();
}
console.log(this.ltsForm); // Array 'prods' is empty
}
// initialize form group, but don't add products yet because they will be added dynamically later
initFormGroup() {
let group = this.formBuilder.group({
products: this.initProductGroup()
});
return group;
}
initProductGroup() {
let group = this.formBuilder.group(
{
//initialize empty formbuilder array
prods: this.formBuilder.array([])
}
);
return group;
}
initProducts() {
return this.formBuilder.group({
id: [''],
value: false, // checkbox value
});
}
addProduct() {
<FormArray>this.ltsForm.controls['products'].value.prods.push(this.initProducts());
console.log(this.ltsForm); // Array 'prods' contains 3 FormGroup elements
}
}
模板:
<form [formGroup]="ltsForm"
novalidate
(ngSubmit)="save(ltsForm)">
<div formGroupName="products">
<div formArrayName="prods">
<div *ngFor="let product of ltsForm.controls.products.value.prods.controls; let i = index">
<div [formGroupName]="i">
<input type="checkbox"
formControlName="value"
id="product_{{ i }}"
name="product_{{ i }}">
</div>
</div>
</div>
</div>
<button type="submit"
[disabled]="!ltsForm.valid">
Submit
</button>
</form>
在方法addProduct()
我将整个 FormGroup 元素推送到“prods”数组。 所以最后ngOnInit()
中控制台的输出只包含一个空的 'prods' 数组,而addProduct()
方法中控制台输出的数组有 3 个元素。 看起来this.ltsForm
失去了它的引用并且没有更新。 有任何想法吗?
UPD:刚刚发现如果我从模板中删除整个内容,我会得到充满数据的“产品”。
有许多小错误和复杂性,因此我缩减了您的示例并重新构建了它。 Angular 团队提供了非常有用的嵌套表单数组和嵌套表单组示例。 这是过程(和plnkr ):
{ projects: '' }
。 有一个带有一组控件的组正在工作: { projects: ['a', 'b', 'c'] }
。 我跳过prods
,这似乎没有必要。
<form [formGroup]="ltsForm" novalidate (ngSubmit)="save()"> <div formArrayName="products"> <div *ngFor="let p of products.controls; let i=index"> <input [formControlName]="i"> </div> </div> <button type="submit" [disabled]="!ltsForm.valid"> Submit </button> </form> ... export class CombinedComponent implements OnInit { ltsForm: FormGroup; get products() { return this.ltsForm.get('products'); } constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.ltsForm = this.formBuilder.group({ products: this.formBuilder.array([]) }); for (let i = 0; i < 3; ++i) { this.addProduct(); } } addProduct() { this.products.push(this.formBuilder.control('')); } save() { console.log(this.ltsForm.value); } }
最后一步用组替换数组中的控件:
@Component({ selector: 'combined-component', template: ` <form [formGroup]="ltsForm" novalidate (ngSubmit)="save()"> <div formArrayName="products"> <div *ngFor="let p of products.controls; let i=index"> <div [formGroupName]="i"> <input formControlName="id"> <input type="checkbox" formControlName="value"> </div> </div> </div> <button type="submit" [disabled]="!ltsForm.valid"> Submit </button> </form> ` }) export class CombinedComponent implements OnInit { ltsForm: FormGroup; get products() { return this.ltsForm.get('products'); } constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.ltsForm = this.formBuilder.group({ products: this.formBuilder.array([]) }); for (let i = 0; i < 3; ++i) { this.addProduct(); } } addProduct() { this.products.push(this.formBuilder.group({ id: '', value: false })); } save() { console.log(this.ltsForm.value); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.