Форма управления valueChanges дает Предыдущее значение

у меня есть элемент управления формой с именем 'question1' внутри объекта форма parentForm и я подписался на него следующим образом.

его переключатель с двумя вариантами Yes и No, когда я выберите No Я Yes и когда я выберите Yes его No.

this.parentForm.controls['question1'].valueChanges.subscribe(
  (selectedValue) => {
    // If option `No is selected`
    console.log(selectedValue);  // displays No. OK
    console.log(this.parentForm.value['question1']);  // displays Yes. Problem is here
  }
);

selectedValue переменная имеет правильное значение, но если я делаю console.log(this.parentForm.value['question1'] это дает Предыдущее значение.

я попытался поставитьsetTimeout() перед извлечением значения из this.parentForm.value['question1'], он просто отлично работает.

setTimeout(() => {
  console.log(this.parentForm.value['question1']); // gives the correct value.
}, 500);

но мой вопрос в том, почему parentForm не обновляется, когда изменяется значение его элемента управления, и это тоже я получаю его значение только после изменения значения.

примечание: Я не хочу наблюдать за parentForm.valueChanges, а не мое требование.

9
angular angular2-formbuilder angular2-forms

3 ответов

на valueChanges событие после новое значение обновляется до FormControl значением, и до изменение пузырится до своего родителя и предков. Поэтому вам нужно будет получить доступ к значению FormControl сам (который только что был исправлен), а не поле FormGroup объект value (который не затрагивается во время события).

в свете этого, используйте this.parentForm.get('question1').value вместо:

this.parentForm.controls['question1'].valueChanges.subscribe(
    (selectedValue) => {
      console.log(selectedValue);
      console.log(this.parentForm.get('question1').value);     
    }
);
15

есть еще один вариант, но он может не подходить во всех случаях: вы можете подождать один тик до selectedValue обновляется в FormControl:

setTimeout( () => console.log( selectedValue ) );

подробнее о sync / async forms тема:реактивные формы в угловых направляющих документах.

2

попробуйте сделать это

this.parentForm.controls['question1'].valueChanges.subscribe(
    (selectedValue) => {
      console.log(selectedValue);
      console.log(this.parentForm.value.question1);     
    }
);

если элементы управления FormBuilder были обновлены, вы можете немедленно восстановить последние значения из объекта FormBuilder через значение свойства

1