Angular 2 не обновляет значение FromGroup автоматически
Я использую недавно выпущенный 2.0.0 Angular, в основном у меня есть компонент, который инициализирует значения его шаблона формы, который состоит из текстового поля ввода и formArray FormGroup с двумя текстовыми полями ввода.
Когда инициализация завершена, привязка работает нормально, но когда я помещаю новую 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>
решаемая
Я пытался передать новую группу форм в свойство элементов управления массива форм, и она должна быть передана в сам массив форм.
Я изменил метод addBand на это:
addBand(){
this.form_band.controls.bands.push(
this._fb.group({
name : [ '', Validators.required ],
score : 0
})
);
}