angular - Angular react 形式:valueChanges不能按预期工作

我正在学习在Angular 6中使用Reactive Forms，所以如果这个问题很愚蠢，请原谅我，但这是我的问题:

我想以我的反应形式监视某个值的更改，因为发生更改时，我需要运行一些逻辑以根据新值重新计算内容。所以我尝试这样做:

this.inputGroup = formBuilder.group({
  myControl: 'something'
});

this.inputGroup.get('myControl').valueChanges.subscribe(newVal => {
  console.log("new value", newVal); //Prints the correct new value
  console.log("actual value", this.inputGroup.value.myControl); //Prints the previous (old) value!

  this.someFuncThatExpectsTheValuesToBeUpToDate(); //This will find the OLD value inside this.inputGroup.value.myControl, instead of the new one!
});

但是，从您在代码中添加的注释中可以看出，这是行不通的，因为valueChanges似乎在之前被称为，而该值实际上已在模型中更改了!这是预期的行为吗？ valueChanges的方法签名说:

可以观察到的多播，每当其值
控件会在UI中或以编程方式进行更改。

所以我会以为它在表单中的值被更改之后被称为，但是显然不……这是正确的吗？如果是这样，我如何检测控件中的值实际何时更改？

编辑:关于WHY似乎有些困惑(与SO:D一样)，我希望我的函数直接从Form组访问数据，而不是将新值传递给函数本身。这很容易解释:该函数从多个表单组中收集数据，并使用此数据进行一些旁计算。通过直接从表单组访问数据，该函数是通用的，可以从任何地方调用。如果我开始将输入参数放在那里，这会中断。举个例子:

someFuncThatExpectsTheValuesToBeUpToDate(){
  let val1 = inputGroup.value.myControl;
  let val2 = someOtherFormGroup.value.myOtherControl;
  let val3 = yetAnotherFormGroup.value.someOtherControl;
  //do something with the vals
}

有了这个功能，我可以在任何地方调用它，它将起作用。但是，如果我每次都需要传递值，那么我将需要3个具有不同签名的不同函数来完成相同的事情，这更加麻烦和复杂。

最佳答案

在将新值更新为FormControl值之后，并且将更改冒泡到其父项和祖先之前，将触发valueChanges事件。因此，您将必须访问FormControl本身的值，而不是FormGroup值对象的字段。

订阅中的console.log this.inputGroup.get('myControl').value将会具有新值。