尽管 formControl 对象中有一个“值”键，但 formControl.value 返回 null答案

【问题标题】：formControl.value returns null although there is a "value" key in formControl object尽管 formControl 对象中有一个“值”键，但 formControl.value 返回 null
【发布时间】：2021-07-14 08:44:51
【问题描述】：

我有一个相当复杂的表单，里面有很多控件，我想在 formGroup.valueChanges 订阅回调中获取其中一个值。（下面的示例代码）

所以我做了一个简单的console.log(this.control)，它返回的控制总是肯定包含一个带有值的“值”键，比如说“26”。

但是，在某些情况下，当我尝试使用 console.log(this.control.value) 获取此值时，它会返回 null。

我尝试使用 setTimeOut 并且效果很好，但在我看来这不是解决问题的正确方法。

这种行为的秘诀是什么？

this.someFormGroup.valueChanges .pipe(first()) .subscribe(() => {       
   console.log(this.control)   // form control with value:'26' in it.
   console.log(this.control.value); // null
   setTimeout(() => {   // works well
      console.log(this.control)   // form control with value:'26' in it.
      console.log(this.control.value)  // '26;
    });
})

【问题讨论】：

为什么您订阅表单值更改而不是检查值更改（ f.e. .subscribe(data => console.log('form data change', data) ）您检查控制值？它是一个异步操作，所以当你 console.log(this.control.value) 时值不存在。如果你只想观察这个控件值的变化，那么你应该订阅这个控件 valueChanges 而不是整个 formGroup
感谢您的回答，它说得很清楚。但是你能解释一下为什么在formControl中有一个带有值的“值”键吗？这个实体与 formControl.value 所指的实体不同吗？
有一个值，但在调用 console.log(this.control.value) 时无法访问。 console.log(this.control) 尽管它显示在 value 参数中，但它还没有冒泡以访问它。你可以把它想象成在你触发这个 console.log 方法的同时，它已经被填充了，但是当你想直接访问它时它还不存在。

标签： angular angular-reactive-forms angular-forms

【解决方案1】：

如果你想访问“this.control.value”，你应该只观察这个控件的 valueChanges，或者如果你需要整个表单上下文，你应该只观察变化而不是单独检查任何控件，因为值可能不是冒泡到这个控制值，因为它是一个异步方法。

this.someFormGroup.valueChanges.pipe(first()).subscribe(data =>          
   console.log(data)  // show whole formGroup data change
})

或

this.control.valueChanges.pipe(first()).subscribe(data =>          
   console.log(data)  // show control data change
})

【讨论】：