Angular OnPush模式下FormArray内FormControl的setErrors不更新视图问题

核心问题本质 #

你碰到的现象是OnPush模式下的典型问题：Angular不会自动监听FormArray/FormGroup这类引用类型的内部状态变化，仅当组件输入属性引用改变、事件触发或手动调用变更检测时才会更新视图。而你的save$作为BehaviorSubject会在表单构建完成后立即触发，此时表单状态变更的时机和变更检测周期错位，导致视图显示的状态和表单实际状态不一致。

关键代码缺失点 #

1. 未监听表单内部状态变更并触发变更检测：FormGroup/FormArray的statusChanges/valueChanges流能感知内部状态变化，但OnPush模式下需要手动关联变更检测。
2. 初始触发时机过早：BehaviorSubject的初始值在表单还未完成视图绑定时就触发验证，导致状态判断和视图渲染不同步。

具体解决方案 #

1. 监听表单状态变化，主动触发变更检测 #

在组件中监听整个表单及FormArray的状态变化，每次变化时调用markForCheck()：

import { takeUntil } from 'rxjs';

// 组件类中
private destroy$ = new Subject<void>();

ngOnInit() {
  // 监听整个表单的状态变更
  this.form.statusChanges.pipe(
    takeUntil(this.destroy$)
  ).subscribe(() => {
    this.cdr.markForCheck();
  });

  // 监听FormArray的行状态变更
  const rowsArray = this.form.get('rows') as FormArray;
  rowsArray.statusChanges.pipe(
    takeUntil(this.destroy$)
  ).subscribe(() => {
    this.cdr.markForCheck();
  });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

2. 用async管道绑定表单状态，自动触发变更检测 #

利用async管道的特性，将表单状态转为Observable后绑定到视图，async管道会自动处理变更检测：

// 组件类中
formValid$: Observable<boolean>;

ngOnInit() {
  this.formValid$ = this.form.statusChanges.pipe(
    startWith(this.form.valid),
    map(status => status === 'VALID'),
    takeUntil(this.destroy$)
  );
}

模板中使用：

<div>表单整体状态：{{ formValid$ | async ? '有效' : '无效' }}</div>

3. 调整save$的初始触发时机 #

将save$改为普通Subject，在视图完全初始化后再发送初始验证信号，避免过早触发：

// 组件类中
save$ = new Subject<boolean>();

ngAfterViewInit() {
  // 视图初始化完成后，再触发初始验证
  this.save$.next(this.form.valid);
}

额外验证要点 #

• 检查FormGroup的验证规则：确认是否存在跨控件验证器（比如行内多个控件的联合验证），这类验证器会导致整体FormGroup无效，但单个FormControl显示有效，容易被忽略。
• 确认ChangeDetectionRef的注入：确保组件中正确注入private cdr: ChangeDetectionRef，且markForCheck()调用在状态变更之后。

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