多表单共享FormGroup时UI不同步问题咨询

核心原因 #

当通过UI操作mat-select时，FormControl的值确实已成功更新，但其他组件的mat-select视图未同步，本质是Angular变更检测未感知到FormControl内部值的变化（尤其当组件使用OnPush变更检测策略时）：

• 编程式更新（如patchValue）通常会在Angular的变更检测周期内执行，或触发了隐式的变更检测，因此所有绑定的表单视图都会同步更新。
• 而UI操作触发的FormControl值变更，若组件采用OnPush策略，由于FormGroup/FormControl的引用未发生变化，Angular不会主动触发组件的变更检测，导致其他组件的mat-select视图未更新。

你临时添加[ngModel]有效的原因是：[ngModel]直接绑定了FormControl的具体值，当值变化时，Angular的变更检测会识别到这个值的更新，从而强制刷新mat-select的视图。但这种方式属于冗余绑定，并非最优解。

正确解决方案 #

无需同时使用formControlName和ngModel，以下两种方式可以解决问题：

1. 手动触发变更检测（适用于OnPush组件） #

在使用共享FormGroup的组件中，订阅FormControl的valueChanges，并手动通知变更检测：

import { Component, OnInit, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-shared-form',
  templateUrl: './shared-form.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SharedFormComponent implements OnInit {
  constructor(private myService: MyService, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.myService.myForm.get('selection')?.valueChanges.subscribe(() => {
      this.cdr.markForCheck(); // 标记组件需要进行变更检测
    });
  }
}

2. 使用async管道自动触发变更检测 #

在模板中通过async管道监听FormControl的valueChanges，利用管道自动触发变更检测：

<form [formGroup]="myService.myForm">
  <mat-form-field>
    <mat-select 
      formControlName="selection"
      [value]="myService.myForm.get('selection')!.valueChanges | async"
    >
      <mat-option *ngFor="let option of options" [value]="option.value">
        {{ option.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

3. 调整变更检测策略（应急方案） #

如果组件没有特殊性能需求，可以移除changeDetection: ChangeDetectionStrategy.OnPush配置，让Angular默认的变更检测策略自动感知FormControl的值变化。

内容的提问来源于stack exchange，提问作者Windom Earle