Angular 14响应式表单markAllAsTouched()行为异常排查

问题根源 #

Angular Material的mat-form-field要显示红色错误边框，必须同时满足两个条件：

• 控件处于invalid状态（你的必填项未填已满足该条件）
• 控件处于touched状态

你代码里调用了this.mainForm.markAllAsTouched()，但Angular的变更检测没有立刻执行，导致mat-form-field无法及时感知到控件的touched状态变化，因此提交时未显示红色边框；而点击复选框或字段本身时，用户交互触发了变更检测，状态更新才生效。

另外，由于name控件嵌套在profile子表单组中，在部分场景（比如组件采用OnPush变更检测策略）下，父表单的markAllAsTouched()可能无法同步触发子控件的视图更新。

解决办法 #

1. 强制触发变更检测
   注入ChangeDetectorRef，在标记控件为touched后手动触发检测：

   import { ChangeDetectorRef } from '@angular/core';
   
   constructor(private cdr: ChangeDetectorRef) {}
   
   // 提交逻辑内
   if (this.mainForm.invalid) {
     // 你的提示逻辑代码
     this.mainForm.markAllAsTouched();
     this.cdr.detectChanges(); // 强制更新视图
     return false;
   }
   

2. 直接标记目标控件
   如果嵌套表单组同步存在问题，可以直接定位到name控件进行标记：

   this.mainForm.get('profile.name')?.markAsTouched();
   

3. 检查变更检测策略
   如果组件使用了OnPush变更检测策略，需确保组件的输入属性或可观察对象有更新，或者采用方案1的手动检测方式兜底。

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