如何在Angular中创建可显示自定义错误提示的自定义验证器？

要实现自定义错误提示，只需在输入框下方添加错误提示元素，根据表单控件的错误状态和交互状态控制显示即可，以下是具体修改方案：

修改HTML模板 #

在输入控件后添加错误提示区域，结合控件的ageRange错误标识以及touched/dirty状态来显示提示：

<p-dialog header="My Dialog">
  <form [formGroup]="createForm">
    <ng-container>
      <input
        id="age"
        pInputText
        maxlength="30"
        formControlName="age"
        [style]="{width: '25vw'}">
      <!-- 自定义错误提示 -->
      <div *ngIf="createForm.get('age')?.hasError('ageRange') && (createForm.get('age')?.touched || createForm.get('age')?.dirty)" 
           style="color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem;">
        请输入0到10之间的值
      </div>
    </ng-container>
  </form>
</p-dialog>

可选：使用PrimeNG的p-message组件（贴合UI风格） #

如果项目使用PrimeNG组件库，也可以用自带的消息组件展示错误：

<p-dialog header="My Dialog">
  <form [formGroup]="createForm">
    <ng-container>
      <input
        id="age"
        pInputText
        maxlength="30"
        formControlName="age"
        [style]="{width: '25vw'}">
      <p-message severity="error" 
                 text="请输入0到10之间的值"
                 *ngIf="createForm.get('age')?.hasError('ageRange') && (createForm.get('age')?.touched || createForm.get('age')?.dirty)">
      </p-message>
    </ng-container>
  </form>
</p-dialog>

组件类代码无需修改 #

原有的表单初始化和验证器逻辑保持不变即可，验证器已正确返回ageRange错误标识，供模板判断使用：

ngOnInit() {
    super.ngOnInit();
    this.createForm = this.fb.group({
      'age' : new FormControl(null, [this.ageRangeValidator])
    });
}

ageRangeValidator(control: AbstractControl): { [key: string]: boolean } | null {
    if (control.value !== undefined && (isNaN(control.value) || control.value < 0 || control.value > 10)) {
        return { 'ageRange': true };
    }
    return null;
}

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