如何在Angular中自定义日期验证错误提示信息？

1. 调整自定义日期格式验证器 #

修改task-form.component.ts中的dateFormatValidator，改用控件的rawValue（用户实际输入的文本）做验证判断，避免mat-datepicker将无效日期转为null导致的验证偏差：

private dateFormatValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 获取用户输入的原始文本并去除首尾空格
    const inputValue = control.rawValue?.trim();
    if (!inputValue) {
      return null; // 空值交由required验证处理
    }
    const validFormat = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
    return validFormat.test(inputValue)
      ? null
      : { invalidDateFormat: true };
  };
}

2. 调整错误提示的判断顺序 #

修改task-form.component.html中的错误逻辑，优先检查格式错误，确保输入无效内容时先显示格式提示：

@if (taskForm.get('dueTo')?.touched) {
<mat-error>
  @switch (true) { 
    @case (taskForm.get('dueTo')?.hasError('invalidDateFormat')) { 
      Invalid date format. Please use MM/DD/YYYY. 
    } 
    @case (taskForm.get('dueTo')?.hasError('required')) { 
      Date is required 
    } 
  }
</mat-error>
}

逻辑说明 #

• mat-datepicker遇到无效日期输入时，会把控件value设为null，但rawValue会保留用户输入的原始文本，因此用rawValue能准确判断用户是否输入了内容以及格式是否合规。
• 调整错误判断顺序后，用户输入无效格式文本时，invalidDateFormat错误会被优先触发，显示格式提示；只有用户未输入任何内容时，才会触发required的必填提示。

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