Angular响应式表单编辑模式设置FormControl值卡顿问题排查

我在Angular应用中使用Reactive Form Module，遇到了一个奇怪的性能问题：下拉框本身能快速渲染1000条数据，但仅为对应FormControl设置100条数据的值时，页面会卡顿近10秒；如果不设置表单值，应用运行完全正常。

HTML代码 #

<form *ngIf="myForm" [formGroup]="myForm" (submit)="onSubmit()">
  <mat-select *ngIf="!option.isMultiple" [formControlName]="option.id">
    <mat-option [value]="option.values">
      {{ option.values }}
    </mat-option>
  </mat-select>
</form>

TypeScript代码 #

ngOnInit(){
    let data = items.map(e=>e.key);
    this.form.controls[this.option.id].setValue(data); // 这行代码导致卡顿
}

问题原因分析 #

1. 表单值变更的连锁反应：setValue会触发表单的值变更检测，连带触发表单状态更新、验证器执行、valueChanges订阅回调，以及关联UI组件（这里是mat-select）的内部逻辑。哪怕没有明显的DOM插入，mat-select会对所有选项和控件值进行匹配比对，100条数据的比对过程叠加初始化逻辑，就会造成卡顿。
2. 单选控件设置数组值的异常：从HTML的*ngIf="!option.isMultiple"能看出这是单选下拉框，但你设置的data是map得到的数组，单选控件接收数组值会导致mat-select内部做额外的异常处理，进一步增加耗时。
3. 初始化阶段的性能叠加：ngOnInit是Angular组件初始化的核心阶段，此时大量初始化逻辑和表单值变更的逻辑叠加，会放大性能问题。

解决方案 #

• 修正单选控件的值类型：如果是单选下拉，data应该是单个值而非数组，把代码改成：

  let data = items.length > 0 ? items[0].key : '';
  

• 用patchValue替代setValue：patchValue不会严格校验表单结构，能减少不必要的状态更新开销：

  this.form.controls[this.option.id].patchValue(data);
  

• 延迟设置值到初始化完成后：用setTimeout把设置值的逻辑放到下一个宏任务，避免和ngOnInit的初始化逻辑冲突：

  ngOnInit(){
    setTimeout(() => {
      let data = items.length > 0 ? items[0].key : '';
      this.form.controls[this.option.id].setValue(data);
    }, 0);
  }
  

• 关闭控件的实时更新：创建FormControl时设置updateOn: 'submit'，只在提交时触发验证和状态更新，减少初始化时的性能消耗：

  // 创建FormControl时配置
  new FormControl('', { updateOn: 'submit' });
  

• 自定义选项比对逻辑：给mat-select添加[compareWith]函数，替代默认的全等比对，提升匹配效率：
  HTML修改：

  <mat-select *ngIf="!option.isMultiple" [formControlName]="option.id" [compareWith]="compareFn">
  

  TS添加：

  compareFn(selectedValue: any, optionValue: any): boolean {
    return selectedValue === optionValue; // 可根据你的数据结构自定义
  }
  

内容的提问来源于stack exchange，提问作者New User