angular - 如果 FormGroup 通过 valueChanges 相互监听，则 Angular 中的 FormGroup 无法正确看到其子项的单个更改

Question

我的情况很简单。有一个包含两个字段的 html 表单:

• 名字
• 姓氏

我希望在用户更改 firstName 时更改 lastName。我通过 Angular (8) 中可观察到的 valueChanges 实现了它。

此外，我有两个订阅来监听和记录更改:

• 整体形式
• 一个关于 lastName

实现方式如下:

 ngOnInit(){
    this.form = new FormGroup({
      firstName: new FormControl('', {updateOn: 'blur'}),
      lastName: new FormControl('', {updateOn: 'blur'}),
    });
    this.form.get('lastName').valueChanges.subscribe(value => console.log('lastName', value));
    this.form.valueChanges.subscribe(value => console.log('Value', value));

    this.form.get('firstName').valueChanges
      .subscribe(firstName => {
        this.form.get('lastName').setValue(`firstName ${firstName} ${new Date().getMilliseconds()}`);
      });
  }

一般来说 - 从用户的 Angular 来看 - 这符合预期。用户更改 firstName，然后 lastName 自行更改。

但是当我查看控制台日志时，我得到的是:

lastName firstName test 850 
Value > {firstName: "test", lastName: "firstName test 850"}
Value > {firstName: "test", lastName: "firstName test 850"}

我预计会有两份完整的日志，但其中一份的名字已更改，第二份的姓氏已更改。更像这样:

Value > {firstName: "test", lastName: ""}
lastName firstName test 850 
Value > {firstName: "test", lastName: "firstName test 850"}

这是关于 stackblitz 的完整示例.

好的，所以当我改变一种方式时，我从这里更新 lastName:

this.form.get('lastName').setValue(`firstName ${firstName} ${new Date().getMilliseconds()}`);

为此:

setTimeout(() => this.form.get('lastName').setValue(`firstName ${firstName} ${new Date().getMilliseconds()}`));

然后日志按我预期的顺序排列:

Value > {firstName: "test", lastName: ""}
lastName firstName test 850 
Value > {firstName: "test", lastName: "firstName test 850"}

但是，setTimeout 在这里似乎很棘手。这是 stackblitz 上的完整代码.

问题是:这里发生了什么？为什么 FormGroups 以这种方式工作？Angular 中是否有处理此类事件的模式(当一种形式影响另一种形式时)？

Answer 1

这就是事件循环的工作原理

两种情况下发生了什么:

没有设置超时

1. 用户设置名字
2. firstName.valueChanges 添加到 EventLoop 队列
3. EventLoop 运行并调用操作firstName.valueChanges
4. lastName.setValue 被调用
5. lastName.setValue 添加 lastName.valueChanges 和 form.valueChanges 到 eventLoop 队列
6. lastName.valueChanges 添加 form.valueChanges 到 eventLoop 队列
7. lastName.valueChanges 出队
8. form.valueChanges(来自 lastName.valueChanges)出队
9. form.valueChanges(来自 firstName.valueChanges)出队

设置超时

1. 用户设置名字
2. firstName.valueChanges 添加到 EventLoop 队列
3. EventLoop 运行并调用操作firstName.valueChanges
4. setTimeout(lastName.setValue) 没有被调用但是被添加到事件循环队列中
5. firstName.valueChanges 添加 form.valueChanges 到事件循环队列
6. setTimeout 出队，他设置lastName 值并将lastName.valueChanges 添加到tevent 循环队列
7. form.valueChanges(来自 firstName.valueChanges)出队
8. lastName.valueChanges 出列并将 form.valueChanges 添加到事件循环队列
9. form.valueChanges(来自 lastName.valueChanges)出队