我正在使用Angular的最新版本2.0.0，基本上我有一个组件初始化其表单模板的值，该模板由输入文本框和带有两个输入文本框的FormGroup的formArray组成 .
初始化完成后，绑定工作正常，但是当我将一个新的FormGroup推送到formArray时，表单值不会反映新添加的项目，直到我在最初绑定的某个文本框中进行某些值更改 . 为什么这种行为以及如何在添加一些动态FormGroup时更新表单值？
我的组件和模板代码是这样的：
//initialize the form values
//this_fb is the form builder
setControlsValues(){
this.form_band = this._fb.group({
name : [ 'test', [ Validators.required ] ],
bands : this._fb.array([
this._fb.group({
name : [ 'band 1', [ Validators.required] ],
score : 10
}),
this._fb.group({
name : [ 'band 2', [ Validators.required] ],
score : 8
})
])
});
}
//push a new FormGroup when user click button
addBand(){
this.form_band.controls.bands.controls.push(
this._fb.group({
name : [ '', Validators.required ],
score : 0
})
);
}
<form [formGroup]="form_band" validate="off">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" formControlName="name" autocomplete="off">
</div>
<div class="form-group" >
<h4>Bands</h4>
<div formArrayName="bands">
<div *ngFor="let band of form_band.controls.bands.controls; let i=index">
<div [formGroupName]="i">
<input type="text" class="form-control" formControlName="name">
<input type="text" class="form-control" formControlName="score">
</div>
</div>
</div>
<button type="button" class="btn" (click)="addBand()">Add band</button>
</div>
Solved
我试图将新的表单组推送到表单数组的controls属性，并且必须将其推送到表单数组本身 .
我将addBand方法更改为：
addBand(){
this.form_band.controls.bands.push(
this._fb.group({
name : [ '', Validators.required ],
score : 0
})
);
}