Angular标记表单控件为dirty/touched后UI未实时更新问题

你遇到的核心问题是：在signalSlice的动作中调用markAsTouched/markAsDirty后，使用ChangeDetectionStrategy.OnPush的组件无法实时更新UI，只有在输入框触发blur事件后才会同步状态。

根本原因在于：

• Angular的OnPush变更检测模式下，仅当输入属性变化、组件自身事件触发或显式调用变更检测时，才会更新UI。
• Reactive Forms的touched/dirty是普通属性而非信号，修改这些属性不会触发Angular的变更检测机制，只有表单指令的原生事件（如blur）才会触发组件更新。

以下提供三种可行的解决方式，按推荐优先级排序：

方案一：将表单状态整合到signalSlice管理 #

这种方式贴合signalSlice的信号驱动设计，将表单状态纳入全局状态管理，状态变化会自动触发组件更新：

修改AppService #

@Injectable()
export class AppService {
  readonly #initialState = {
    submitting: false,
    form: {
      name: {
        touched: false,
        dirty: false,
        valid: false
      }
    }
  };

  readonly formGroup = new FormGroup<{ name: FormControl<string> }>({
    name: new FormControl<string>('', { validators: [Validators.required] }),
  });

  constructor() {
    // 监听表单状态变化，同步到signalSlice
    combineLatest([
      this.formGroup.controls.name.statusChanges,
      this.formGroup.controls.name.valueChanges
    ]).pipe(
      tap(() => {
        this.state.updateFormState({
          name: {
            touched: this.formGroup.controls.name.touched,
            dirty: this.formGroup.controls.name.dirty,
            valid: this.formGroup.controls.name.valid
          }
        });
      })
    ).subscribe();
  }

  readonly state = signalSlice({
    initialState: this.#initialState,
    actionSources: {
      submit: (_state: any, $: Observable<void>) =>
        $.pipe(
          tap(() => console.log('Submit triggered')),
          tap(() => {
            this.formGroup.controls.name.markAsDirty();
            this.formGroup.controls.name.markAsTouched();
            // 无需额外操作，combineLatest会自动同步状态到signalSlice
          }),
          filter(() => this.formGroup.valid),
          tap(() => console.log('Form valid')),
          switchMap(() =>
            timer(5000).pipe(
              tap(() => console.log('Submitted')),
              map(() => ({ submitting: false })),
              startWith({ submitting: true })
            )
          )
        ),
      // 新增动作用于更新表单状态
      updateFormState: (state, $: Observable<typeof state.form>) =>
        $.pipe(map(form => ({ form })))
    },
  });
}

修改MyForm组件 #

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [JsonPipe, ReactiveFormsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <form [formGroup]="formGroup">
      <input type="text" formControlName="name" placeholder="Name" />

      <p>Touched: {{ formState().name.touched | json }}</p>
      <p>Dirty: {{ formState().name.dirty | json }}</p>
    </form>
`,
})
export class MyForm {
  #appService = inject(AppService);

  formGroup = this.#appService.formGroup;
  // 订阅signalSlice中的表单状态信号
  formState = this.#appService.state.form;
}

方案二：将表单状态转为信号 #

通过toSignal把表单的touched/dirty状态包装成信号，让组件订阅信号变化触发更新：

修改AppService #

@Injectable()
export class AppService {
  // ... 原有代码

  // 将表单状态转为信号
  readonly nameTouched = toSignal(
    this.formGroup.controls.name.statusChanges.pipe(
      map(() => this.formGroup.controls.name.touched),
      startWith(this.formGroup.controls.name.touched)
    )
  );

  readonly nameDirty = toSignal(
    this.formGroup.controls.name.statusChanges.pipe(
      map(() => this.formGroup.controls.name.dirty),
      startWith(this.formGroup.controls.name.dirty)
    )
  );
}

修改MyForm组件 #

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [JsonPipe, ReactiveFormsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <form [formGroup]="formGroup">
      <input type="text" formControlName="name" placeholder="Name" />

      <p>Touched: {{ nameTouched() | json }}</p>
      <p>Dirty: {{ nameDirty() | json }}</p>
    </form>
`,
})
export class MyForm {
  #appService = inject(AppService);

  formGroup = this.#appService.formGroup;
  nameTouched = this.#appService.nameTouched;
  nameDirty = this.#appService.nameDirty;
}

方案三：显式触发变更检测 #

通过事件通知组件手动触发变更检测，适合不想改动状态结构的场景：

修改AppService #

@Injectable()
export class AppService {
  // 用于通知组件更新的事件流
  readonly formStateUpdated = new Subject<void>();

  // ... 原有代码

  readonly state = signalSlice({
    initialState: this.#initialState,
    actionSources: {
      submit: (_state: any, $: Observable<void>) =>
        $.pipe(
          tap(() => console.log('Submit triggered')),
          tap(() => {
            this.formGroup.controls.name.markAsDirty();
            this.formGroup.controls.name.markAsTouched();
            // 发送事件通知组件更新
            this.formStateUpdated.next();
          }),
          // ... 原有操作
        ),
    },
  });
}

修改MyForm组件 #

@Component({
  // ... 原有元数据
})
export class MyForm {
  #appService = inject(AppService);
  #cdr = inject(ChangeDetectorRef);

  formGroup = this.#appService.formGroup;

  constructor() {
    // 订阅事件触发变更检测
    this.#appService.formStateUpdated.subscribe(() => {
      this.#cdr.markForCheck();
    });
  }
}

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