[解決済み] フォームコントロールのvalueChangesが前の値を与える

質問

フォームコントロールに名前 'question1' という名前のフォームコントロールがあります。 parentForm で、以下のように購読しています。

そのラジオボタンには2つのオプションがあります 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 を観測したくないのですが、私の要件ではありません。

どのように解決するのですか？

valueChanges はObservableなので、パイプで pairwise をパイプで接続して、サブスクリプションの前と次の値を取得することができます。

// No initial value. Will emit only after second character entered
this.form.get('fieldName')
  .valueChanges
  .pipe(pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

// Fill buffer with initial value, and it will emit immediately on value change
this.form.get('fieldName')
  .valueChanges
  .pipe(startWith(null), pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

StackBlitzで動作する例です。 https://stackblitz.com/edit/angular-reactive-forms-vhtxua

更新

もし、あなたが startWith が表示される。 非推奨 のように見えますが、そうではありません。 この演算子の有効なシグネチャは1つだけです。 回答 .

可能性が高いのは、startWith(null) または startWith(undefined) を使用していることで、これらは通知にもかかわらず非推奨ではありませんが、IDE は非推奨である間違った関数シグネチャを検出し、警告を表示します。

簡単な回避策は、期待される戻り値の型を提供することです。

// Prevent deprecation notice when using `startWith` since it has not been deprecated
this.form.get('fieldName')
  .valueChanges
  .pipe(startWith(null as string), pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

StackBlitz で動作する例として startWith : https://stackblitz.com/edit/angular-reactive-forms-rvxiua