Angular 14：如何通过AbstractControl获取必填字段名并自定义提示

你可以通过以下几种方式实现包含字段名的错误提示：

方法1：模板中直接拼接提示文本（最简单） #

保持原有表单构建代码不变，在模板里手动编写带字段名的错误提示：

组件代码 #

import { FormBuilder, Validators } from '@angular/forms';

// ...
this.Form = this.formBuilder.group({     
  name: ['', [Validators.required]]
});

模板代码 #

<form [formGroup]="Form" (ngSubmit)="onSubmit()">
  <input formControlName="name" type="text">
  <!-- 仅当控件被触摸且存在必填错误时显示提示 -->
  <div *ngIf="Form.get('name')?.hasError('required') && Form.get('name')?.touched">
    The field <strong>name</strong> is required
  </div>

  <button type="submit">提交</button>
</form>

如果需要统一管理字段显示名称，可以在组件中定义字段标签对象：

fieldLabels = {
  name: 'Name' // 这里可以用更友好的显示名，比如"用户名"
};

模板中改用变量：

<div *ngIf="Form.get('name')?.hasError('required') && Form.get('name')?.touched">
  The field <strong>{{ fieldLabels.name }}</strong> is required
</div>

方法2：自定义带字段名的验证器 #

如果需要把错误信息直接绑定到控件的errors对象中，可以编写自定义验证器：

自定义验证器函数 #

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

export function requiredWithFieldName(fieldName: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 检查控件值是否为空（含空字符串）
    if (!control.value || control.value.trim() === '') {
      // 返回包含自定义提示的错误对象
      return { required: `The field <strong>${fieldName}</strong> is required` };
    }
    return null;
  };
}

组件中使用自定义验证器 #

this.Form = this.formBuilder.group({     
  name: ['', [requiredWithFieldName('name')]]
});

模板中渲染错误信息 #

<input formControlName="name" type="text">
<!-- 使用[innerHTML]解析HTML标签 -->
<div *ngIf="Form.get('name')?.hasError('required') && Form.get('name')?.touched"
     [innerHTML]="Form.get('name')?.errors?.required">
</div>

方法3：封装可复用的错误提示组件 #

如果表单字段较多，建议封装一个通用的错误提示组件来复用逻辑：

错误提示组件代码 #

import { Component, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-field-error',
  template: `
    <div *ngIf="control.hasError('required') && control.touched"
         [innerHTML]="requiredMessage">
    </div>
  `
})
export class FieldErrorComponent {
  @Input() control!: AbstractControl;
  @Input() fieldName!: string;

  get requiredMessage(): string {
    return `The field <strong>${this.fieldName}</strong> is required`;
  }
}

父组件模板中使用 #

<input formControlName="name" type="text">
<app-field-error [control]="Form.get('name')!" fieldName="name"></app-field-error>

额外优化：提交时标记所有控件为已触摸 #

为了确保提交表单时能显示所有错误，建议在提交函数中添加标记逻辑：

onSubmit() {
  if (this.Form.invalid) {
    // 标记所有控件为已触摸，触发错误提示
    this.Form.markAllAsTouched();
    return;
  }
  // 处理表单提交逻辑
}

内容的提问来源于stack exchange，提问作者Erik Ieger Dobrychtop