Angular 18中mat-select绑定formControlName后选项不加载问题

问题背景 #

我们有一个实现了MatFormFieldControl和ControlValueAccessor的自定义Angular表单控件MaterialCustomControlComponent，在Angular 11中可正常工作。升级至Angular 18后，控件内部的mat-select绑定formControlName="selectedValue"时，UI无法显示选项；移除该属性后选项可正常加载。使用自定义控件时已传入options数据，但绑定formControlName="myName"后出现此问题。

组件代码 #

@Component({
  selector: 'material-custom-control',
  templateUrl: './material-custom-control.component.html',
  styleUrls: ['./material-custom-control.component.scss'],
  providers: [
    { provide: MatFormFieldControl, useExisting: RapportUiMaterialSelectComponent },
    { provide: ErrorStateMatcher, useClass: CustomErrorMatcher }
  ]
})

export class MaterialCustomControlComponent implements MatFormFieldControl<SelectList>, OnInit, OnDestroy, ControlValueAccessor {
  @Input() options: Array<{ key: string, value: string }>;
  // 省略其他代码
....

模板代码 #

<ng-container [formGroup]="form">    
    <mat-select 
    formControlName="selectedValue">
        <mat-option 
        *ngFor="let option of options" 
        [class.no-content]="!option.value"
        [value]="option.key">{{option.value}}</mat-option>
    </mat-select>
</ng-container>

使用代码 #

<material-custom-control formControlName="myName" [options]="myOptions">
</material-custom-control>

myOptions = [
    { key: '', value: '' },
    { key: 'Option1', value: 'Option1' },
    { key: 'Option2', value: 'Option2' },
    { key: 'Option3', value: 'Option3' },
];

原因分析 #

Angular 18对表单控件的变更检测和ControlValueAccessor的实现要求更严格，核心问题点如下：

1. 内部表单组初始化时机偏差：自定义控件内部的form表单组可能在options输入属性完成初始化前就已创建，导致mat-select无法获取到有效选项数据。
2. 内外控件状态同步冲突：升级后Angular的表单同步机制发生变更，外部绑定的formControlName="myName"与内部selectedValue控件的状态同步逻辑出现冲突，导致视图未触发更新。
3. 变更检测未触发：options数据更新后，Angular 18的默认变更检测策略未感知到变化，未重新渲染mat-select选项。

解决方案 #

1. 延迟内部表单组初始化 #

在ngOnInit或ngOnChanges中，等待options传入后再初始化内部表单组，并订阅值变化同步到外部：

ngOnInit(): void {
  if (this.options) {
    this.initInternalForm();
  }
}

ngOnChanges(changes: SimpleChanges): void {
  if (changes['options'] && changes['options'].currentValue) {
    if (!this.form) {
      this.initInternalForm();
    }
    this.stateChanges.next();
  }
}

private initInternalForm(): void {
  this.form = new FormGroup({
    selectedValue: new FormControl('')
  });
  this.form.get('selectedValue')?.valueChanges.subscribe(value => {
    this.onChange(value);
    this.stateChanges.next();
  });
}

2. 修复ControlValueAccessor的writeValue方法 #

确保外部值传入时能正确同步到内部控件，避免状态不一致：

writeValue(value: string): void {
  if (this.form && value !== undefined) {
    this.form.get('selectedValue')?.setValue(value, { emitEvent: false });
    this.stateChanges.next();
  }
}

3. 手动触发变更检测 #

在options更新后显式触发变更检测，确保视图及时更新：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

ngOnChanges(changes: SimpleChanges): void {
  if (changes['options']) {
    this.cdr.detectChanges();
  }
}

4. 完善MatFormFieldControl的stateChanges实现 #

确保stateChanges主题正确发出事件，通知MatFormField更新视图：

stateChanges: Subject<void> = new Subject<void>();

ngOnDestroy(): void {
  this.stateChanges.complete();
}

内容的提问来源于stack exchange，提问作者Gurpreet Kailey