修补表单后，控件上的更改检测如何工作？

如何解决修补表单后，控件上的更改检测如何工作？

我想知道以下情况会发生什么：

我有一个带有以下控件的formGroup：

{
  forename: new FormControl()
  surname: new FormControl()
}

现在，我像这样跟踪控件“姓氏”的变化（仅作为示例）：

this.formGroup.get('surname').valueChanges.subscribe(changes => {
   if(this.formGroup.get('forename') == 'Max'){
      this.formGroup.get('forename').disable();
   }
})

最后，我像这样修补表单：

this.formGroup.patchForm({surname: 'Muster',forename: 'Max'});

是否将禁用控件“姓氏”？因为我不确定它是否会触发控件“姓”的更改，然后才能设置控件“姓”的值。因此，“姓”可能还没有“正确”值。

当试图触发确切的valueChanges事件时，我试图更好地理解，因为有时我会遇到问题，尽管应该设置值，但未设置。

我还想知道是否有可能等到对每个控件进行修补后再发出更改。

解决方法

原因：

valueChanges的

surname将在patchValue()更新第一个属性后立即触发，因此您将获得null作为forename的值，并且条件this.formGroup.get('forename') == 'Max'为false。

解决方案1：

您可以整个subscribe()的{​​{1}}至valueChanges而不是单个控件，然后检查所需条件。像这样：

formGroup

解决方案2：

只需更改要更新的对象中道具的顺序，就可以使用代码获得所需的行为。像这样：

this.formGroup
      .valueChanges // subscribe to all changes
      .pipe(
        filter(form => form.forename === 'Max') // check if 'forname' is 'Max'
      ).subscribe(
        forename => this.formGroup.get('forename').disable() // disable control
      );

Working Demo with Solution 1

,

这就是我最终要做的：

this.formGroup.get('surname').valueChanges.subscribe(changes => {
   this.handleForenameControl();
})

this.formGroup.get('forename').valueChanges.subscribe(changes => {
   this.handleForenameControl();
})

private handleForenameControl():void{
  if(this.formGroup.get('forename') == 'Max'){
      this.formGroup.get('forename').disable();
   }
}

我知道这不是最干净的，并且我正在考虑不要再放置另一个valueChanges-Subscription，而是。

我的意思是，上面只是一个示例，我没有在项目中实际使用任何代码，因此该示例可能很糟糕。也许这仍然可以帮助某人。