表单控件 valueChanges 给出以前的值 [英] Form control valueChanges gives the previous value

问题描述

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

I have a form control with name 'question1' within the form object parentForm and I have subscribed to it in the following way.

它是一个单选按钮，有两个选项 Yes 和 No，当我选择 No 时，我得到 Yes 和当我选择 Yes 时，它是 No.

Its a radio button with two options Yes and No, when I select No I get Yes and when I select Yes its a 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'] 它会给出以前的值.

selectedValue variable has the correct value but if I do console.log(this.parentForm.value['question1'] it gives the previous value.

我尝试在从 this.parentForm.value['question1'] 检索值之前放置一个 setTimeout()，它工作正常.

I tried to put a setTimeout() before retrieving value from this.parentForm.value['question1'], It just works fine.

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

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

But my question is why parentForm is not updated when its control's value changes and that too I am retrieving its value only after value was changed.

注意:我不想观察 parentForm.valueChanges，这不是我的要求.

Note: I don't want to observe for parentForm.valueChanges, not my requirement.

推荐答案

valueChanges 是一个 Observable，因此您可以通过管道 pairwise 获取订阅中的上一个和下一个值.

valueChanges is an Observable so you can pipe pairwise to get the previous and next values in the subscription.

// 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

Example of it working in StackBlitz: https://stackblitz.com/edit/angular-reactive-forms-vhtxua

更新

如果您注意到 startWith 似乎被弃用，则情况并非如此.运算符只有一个活动签名，您可以在此答案中阅读.

If you're noticing that startWith appears to be deprecated this is not the case. There is only a single active signature for the operator, which you can read about in this answer.

很可能，您正在使用 startWith(null) 或 startWith(undefined)，尽管有通知，但它们并未被弃用，但 IDE 检测到错误的函数签名，该函数签名已被弃用，并显示警告.

Highly likely, you are using startWith(null) or startWith(undefined), they are not deprecated despite the notice, but IDE detects a wrong function signature, which is deprecated, and shows the warning.

一个简单的解决方法是提供预期的返回类型:

A simple work around is providing the return type that would be expected:

// 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

Example of it working in StackBlitz with startWith: https://stackblitz.com/edit/angular-reactive-forms-rvxiua

这篇关于表单控件 valueChanges 给出以前的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！