Angular响应式表单及控件均为ng-valid但提交按钮禁用问题排查

核心原因归类 #

• 提交按钮禁用逻辑额外绑定了pristine/touched状态
  这是该类问题最高发的诱因。很多开发者会给提交按钮的disabled属性额外添加表单交互状态判断，代码通常为：

  <button type="submit" [disabled]="form.invalid || form.pristine">提交</button>
  

  其中form.pristine代表表单控件从未被用户修改过，异步预设值的场景下表单仍然会保持pristine状态，只有手动交互后才会变为dirty，就会出现你遇到的现象：表单值已经有效，但按钮仍然禁用。
• 组件开启了OnPush变更检测策略
  如果你的组件配置了changeDetection: ChangeDetectionStrategy.OnPush，异步请求拿到数据并给表单赋值后，Angular默认不会主动触发组件级的变更检测，导致模板中绑定的form.valid状态没有更新到视图。而Angular内置表单指令更新ng-valid等CSS类的逻辑不受组件变更检测策略影响，所以会出现DOM已经带有ng-valid标记，但自定义绑定的按钮状态未同步的错位情况。手动点击表单时会触发组件的变更检测，视图状态就会恢复同步。
• 表单赋值与选项加载的顺序颠倒
  如果你先给select对应的formControl执行了setValue/patchValue赋值，之后才从API拿到选项列表渲染到模板，赋值时因为没有匹配的option值，formControl会先返回无效状态，后续option加载完成后虽然值匹配了，但formControl没有主动触发状态更新事件，导致视图绑定的状态没有同步。
• 校验器更新后未主动刷新表单状态
  如果你是在表单初始化完成、已经给控件赋值后，才动态给select控件添加了Validators.required校验，添加后没有手动调用控件的updateValueAndValidity()方法，会导致表单实例的状态已经更新，但视图绑定没有触发同步。

对应解决方案 #

• 检查提交按钮的disabled绑定逻辑，确认是否误加了pristine/untouched的判断，如果不需要可以直接删除，仅保留form.invalid即可。
• 开启OnPush策略的组件，在异步给表单赋值完成后，手动注入ChangeDetectorRef调用detectChanges()方法触发变更检测。
• 调整赋值顺序，等API返回选项列表、渲染到模板之后，再给select对应的formControl赋值。
• 动态添加/移除校验器后，主动调用对应控件的updateValueAndValidity()方法，同步表单状态。

内容的提问来源于stack exchange，提问作者js-newb