Angular表单是否可通过Validators在TS文件中配置字段错误提示

完全可以将错误提示统一配置在TS文件中，常用的有两种实现思路，你可以根据业务场景选择：

方案1：自定义带错误提示的验证器 #

适合验证规则和提示全局复用的场景，替换Angular原生的Validators即可：

第一步：TS文件自定义验证器 #

import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';

// 自定义带提示的必填验证器
const requiredWithMsg: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const isValid = Validators.required(control);
  // 验证失败时返回携带提示信息的错误对象
  return isValid ? { required: { msg: '请输入名称' } } : null;
};

// 表单初始化逻辑
formulaire(): FormGroup {
  this.form = this.fb.group({
    nom: ['', [requiredWithMsg]] // 替换原生Validators.required
  });
}

第二步：HTML模板直接读取错误提示 #

<form [formGroup]="form">
 <mat-form-field>
  <mat-label>Nom</mat-label>
  <input matInput formControlName="nom"/>
   <div *ngIf="form.get('nom')?.invalid && form.get('nom')?.touched">
     {{ form.get('nom')?.errors?.['required']?.msg }}
   </div>
 </mat-form-field>
</form>

方案2：TS维护错误映射表 #

适合同个验证规则在不同表单需要展示不同提示的场景，灵活度更高：

第一步：TS文件定义错误映射 #

formulaire(): FormGroup {
  // 所有表单项的错误提示统一在这里配置
  this.errMsgMap = {
    nom: {
      required: '请输入名称',
      // 后续新增验证规则直接加对应配置即可，比如 minlength: '名称最少2个字符'
    }
  };
  this.form = this.fb.group({
    nom: ['', [Validators.required]]
  });
}

第二步：HTML模板读取映射表内容 #

<form [formGroup]="form">
 <mat-form-field>
  <mat-label>Nom</mat-label>
  <input matInput formControlName="nom"/>
   <div *ngIf="form.get('nom')?.invalid && form.get('nom')?.touched">
     {{ errMsgMap.nom['required'] }}
   </div>
 </mat-form-field>
</form>

补充说明 #

• 示例中加了form.get('nom')?.touched判断，避免用户还未输入内容就提前展示错误，交互体验更好
• 如果表单项有多个验证规则，只需要在错误对象/映射表中新增对应key的提示，HTML可以通过Object.keys(form.get('nom')?.errors || {})[0]动态匹配当前触发的错误规则，读取对应提示

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