我正在构建动态表单,并希望“动态”添加表单组。
这是我的代码,几乎可以正常工作:
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团队有一个非常有用的nested form array和nested form group的示例。这是过程(和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);
}
}
关于javascript - Angular 2 : Can't add form group to form array in reactive Forms,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41517389/