表单控件 valueChanges 给出之前的值

Question

我在表单对象parentForm 中有一个名称为'question1' 的表单控件，我已通过以下方式订阅它。

它是一个单选按钮，有两个选项 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'] 它会给出以前的值。

在从this.parentForm.value['question1'] 检索值之前，我尝试输入setTimeout()，它工作正常。

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

但我的问题是为什么 parentForm 在其控件的值更改时不会更新，而且我也仅在值更改后才检索其值。

注意：我不想观察parentForm.valueChanges，不是我的要求。

Answer 1

valueChanges 事件在 新值更新为 FormControl 值之后触发，之前 将更改冒泡到其父级和祖先级。因此，您必须访问 FormControl 本身的值（刚刚修补），而不是 FormGroup 值对象的字段（在事件期间未触及）。

鉴于此，请改用this.parentForm.get('question1').value：

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

Answer 2

还有一个选项，但它可能并不适用于所有情况：您可以等待 one tick 在 FormControl 中更新 selectedValue 之前：

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

有关同步/异步表单主题的更多信息：Angular Guide 文档中的Reactive forms。

Answer 3

尝试这样做

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

如果 FormBuilder 的控件被更新，您可以立即通过属性值从 FormBuilder 对象中恢复最后的值

Answer 4

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 似乎已已弃用，情况并非如此。操作员只有一个活动签名，您可以在此answer 中阅读。

很有可能，您正在使用 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]) => ... );

使用 startWith 在 StackBlitz 中工作的示例： https://stackblitz.com/edit/angular-reactive-forms-rvxiua