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

0 ответов

Другие вопросы по тегам