Angular自定义输入校验器未按预期显示错误提示问题咨询

问题表现 #

• 已精简应用代码专门用于复现自定义校验器的相关问题
• 编写的cannotContainSpace校验器可被框架正常调用，打断点可确认校验逻辑正常执行
• 模板中定义的提示内容：

密码不能包含空格
未按预期展示：输入包含空格的内容后点击Login按钮，预期展示上述错误提示，实际页面没有任何对应错误显示。

修复方案 #

1. 对齐校验器返回值和模板的错误键名 #

校验器逻辑执行不代表返回的错误结构符合模板读取规则，必须保证校验失败时返回的错误对象key和模板中判断的错误名完全一致：

// 正确的自定义校验器写法示例
import { AbstractControl, ValidationErrors } from '@angular/forms';

export function cannotContainSpace(control: AbstractControl): ValidationErrors | null {
  if (typeof control.value === 'string' && control.value.includes(' ')) {
    // 注意此处key必须和模板读取errors的字段名完全一致，不能拼写错误
    return { cannotContainSpace: true };
  }
  // 校验通过必须返回null
  return null;
}

如果返回的key写成hasSpace、containSpace这类和模板不匹配的名称，哪怕校验逻辑执行了，模板也读不到对应错误。

2. 补全模板错误显示的判断条件 #

多数人写错误提示的显示规则时，只会判断控件是否被触碰、是否存在对应错误，没考虑点击提交按钮时用户可能没触发过输入框失焦动作，控件touched状态仍为false，就会导致错误不显示。
修复后的模板判断逻辑参考：

<!-- 假设密码输入框的formControl名为password，所在响应式表单为loginForm -->
<div *ngIf="password.hasError('cannotContainSpace') && (password.touched || loginForm.submitted)">
  密码不能包含空格
</div>

3. 提交逻辑增加状态更新兜底 #

如果调整完上述逻辑仍有问题，可以在登录提交方法里加一层兜底，表单校验不通过时主动把所有控件标记为已触碰状态，强制触发错误提示渲染：

onLoginSubmit() {
  if (this.loginForm.invalid) {
    // 遍历所有表单控件更新状态
    Object.values(this.loginForm.controls).forEach(control => {
      control.markAsTouched();
      control.updateValueAndValidity();
    });
    return;
  }
  // 后续正常登录业务逻辑
}

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