Angular13响应式表单mat-select setValue未触发change事件

1. 代码执行顺序错误：ngOnInit生命周期中先执行了formBuild()方法对formula表单控件调用setValue赋值，之后才执行onChanges()方法注册valueChanges订阅。赋值动作发生在事件监听挂载之前，这次初始化赋值的变更事件自然无法被捕获。后续用户手动选择下拉选项时，订阅已经完成注册，所以逻辑可以正常执行。
2. 事件机制不匹配：mat-select的原生(change)事件只有用户通过UI交互手动选择选项时才会触发，代码调用响应式表单的setValue/patchValue方法不会触发这个原生DOM事件，监听响应式表单值变更应该使用表单控件自带的valueChanges可观察对象，而不是依赖原生change事件。

• 调整生命周期内的执行顺序，先注册值变更监听，再执行表单初始化赋值，保证赋值动作发生时监听已经生效：

ngOnInit(): void {
  // 先挂载值变更订阅
  this.onChanges();
  // 再执行表单构建、初始赋值
  this.formBuild();
}

• 将原本绑定在mat-select的(change)事件上的业务逻辑，全部迁移到valueChanges的订阅回调中，统一处理所有场景下的值变更（包括用户手动选择、代码赋值两种场景）。
• 如果不想受执行顺序影响，确保初始赋值也能被监听逻辑捕获，可以引入RxJS的startWith操作符，在订阅建立时主动发射当前控件的最新值：

import { startWith } from 'rxjs/operators';

onChanges(): void {
  this.f.formula?.valueChanges
    .pipe(startWith(this.f.formula.value))
    .subscribe(val => {
      console.log(val);
      // 此处执行业务逻辑
    });
}

• 特殊场景下如果需要调用setValue时主动控制事件发射，可以传入配置参数，emitEvent为true时（默认值即为true）会正常触发valueChanges事件，为false时会静默赋值不触发事件：

this.f.formula.setValue(metricFormula.Average, { emitEvent: true });

• 注意不要将自定义的普通方法onChanges和Angular内置的OnChanges生命周期钩子混淆，后者仅在组件@Input()输入属性变更时由框架自动调用，无法自动监听表单值变化，当前代码中为手动调用该方法本身没有问题，但命名容易引发误解。

内容的提问来源于stack exchange，提问作者San Jaisy