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

Question

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

我有一个带有这些控件的 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 事件时，因为我有时会遇到问题，但值没有设置，尽管它们应该设置。

我还想知道是否可以等到每个控件都修补完毕然后发出更改。

Answer 1

原因：

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

解决方案一：

您可以subscribe()进行valueChanges整体formGroup控制而不是单个控制，然后检查所需的条件。像这样：

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
      );

解决方案2：

只需更改要更新的对象中的 props 顺序，您就可以通过代码获得所需的行为。像这样：

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

使用解决方案 1 进行工作演示