Angular 2不会自动更新FromGroup值

Question

我正在使用Angular的最新版本2.0.0，基本上我有一个组件初始化其表单模板的值，该模板由输入文本框和带有两个输入文本框的FormGroup的formArray组成。

初始化完成后，绑定工作正常，但是当我将一个新的FormGroup推送到formArray时，表单值不会反映新添加的项目，直到我在最初绑定的某个文本框中进行某些值更改。为什么会出现这种行为，如何在添加一些动态FormGroup时更新表单值？

我的组件和模板代码是：

＆＃13;

＆＃13;

requiredGroups

＆＃13;

//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
    })
  );
}

＆＃13;

＆＃13;

＆＃13;

解决

我试图将新表单组推送到表单数组的controls属性，并且必须将其推送到表单数组本身。

我将addBand方法更改为：

<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>