Angular 6中ng-dirty与ng-invalid未按预期工作问题排查

你遇到的这些情况其实不是操作错误，而是Angular表单控件状态更新和验证触发的默认行为导致的，下面分别解释并给出处理方法：

1. ng-dirty类延迟添加的问题 #

Angular中的ng-dirty标记控件是否被用户交互修改过，正常来说只要用户修改了控件值（和初始值产生差异），就会从ng-pristine切换为ng-dirty。你遇到的延迟情况，大概率是因为控件状态更新时机的默认配置导致的——比如当变更检测策略为OnPush，或者模板驱动表单的状态更新被隐式延迟了。

解决方法很简单，显式指定控件的状态更新时机为实时触发：

<input [(ngModel)]="name" [ngModelOptions]="{ updateOn: 'change' }" required>

updateOn: 'change'是默认值，但显式声明后可以确保值每次变化时立即同步控件状态，不会出现延迟添加ng-dirty的情况。

2. ng-invalid类在失去焦点后才添加的问题 #

这是Angular模板驱动表单的默认验证逻辑：默认情况下，验证器只会在控件被**触摸（touched，即失去焦点）或修改（dirty）**后，才会将验证状态反映到控件类上。也就是说，当你清空输入框时，虽然值已经不符合required规则，但只要控件还没被触摸过，ng-invalid不会立即显示。

如果想要实现输入时实时触发验证，有两种常用方案：

• 方案一：调整模板驱动表单的验证时机
  同样通过ngModelOptions强制实时更新验证状态：

  <input [(ngModel)]="name" [ngModelOptions]="{ updateOn: 'change' }" required>
  

• 方案二：使用响应式表单手动控制
  组件中创建FormControl并指定实时验证：

  import { FormControl, Validators } from '@angular/forms';
  
  nameControl = new FormControl('Rob', {
    validators: [Validators.required],
    updateOn: 'change'
  });
  

  模板中绑定控件：

  <input [formControl]="nameControl">
  

  这样值每发生一次变化，就会立即触发验证，ng-invalid类会实时添加。

总结一下，这些现象都是Angular表单的默认行为，不是你的操作错误，通过调整updateOn选项或者切换为响应式表单，就能实现你想要的实时状态更新效果。

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