Question

我正在学习在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的方法签名说：

可观察到的多播，每次当控件可以通过用户界面或以编程方式进行更改。

因此，我以为在值以表格形式更改之后就被称为它，但是显然不是……这是正确的吗？如果是这样，我该如何检测控件中值的实际更改时间？

EDIT ：关于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个具有不同签名的不同函数来完成同一件事，这更加混乱和复杂。

Answer 1

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

订阅中的

console.log this.inputGroup.get('myControl').value，它将具有新值。

角反应形式：valueChanges不能按预期工作

1 个答案: