如何验证 Angular Material Datepicker？

Question

我有以下代码：

<form [formGroup]="meetingFormGroup">

                  <!-- Date Input -->
                  <mat-form-field>
                    <input
                      matInput
                      [min]="minDate"
                      [max]="maxDate"
                      [matDatepicker]="picker"
                      placeholder="Choose a date"
                      formControlName="date"
                      required
                    >
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>

                    <mat-error *ngIf="meetingFormGroup.controls['date'].hasError('required')"
                      >Please choose a date.</mat-error
                    >
                    <mat-error *ngIf="?????"
                      >Entered date is too small.</mat-error
                    >
                  </mat-form-field>
                </form>

现在在 Angular Material 网站 的“日期验证”部分，我阅读了以下内容：

每个验证属性都有不同的错误可以检查：

A value that violates the min property will have a matDatepickerMin error.
A value that violates the max property will have a matDatepickerMax error.
A value that violates the matDatepickerFilter property will have a matDatepickerFilter error.

所以我的问题是，如何验证 mat-error 标签中的这些错误。我需要在 *ngIf 表达式字段中写什么？

我很抱歉我的英语不好，希望你理解我的问题，也许可以提供解决方案。

谢谢！

Answer 1

来自 Angular Material 网站（此处）：

• 违反 min 属性的值将会出现

  matDatepickerMin

  错误。
• 违反 max 属性的值将会出现

  matDatepickerMax

  错误。
• 违反 matDatepickerFilter 属性的值将出现

  matDatepickerFilter

  错误。

因此，您将使用：

• 分钟 -

  meetingFormGroup.controls['date'].hasError('matDatepickerMin')

• 对于最大 -

  meetingFormGroup.controls['date'].hasError('matDatepickerMax')

• 用于过滤器 -

  meetingFormGroup.controls['date'].hasError('matDatepickerFilter')

  。

Answer 2

模板：

<mat-error *ngFor="let error of getErrorMessages(control)">{{ error }}</mat-error>

使用这种方法，您可以列出 mat-error 实例中的所有错误消息，并将显示错误消息列表。

getErrorMessages(control: AbstractControl): string[] {
  const errors = {};

  if (control?.errors) {
    const controlErrors = control.errors;

    if (controlErrors?.matDatepickerMin) {
     // Any custom logic in case needs to apply
      errors['matDatepickerMin'] = 'Min Date can't be less than e.g 2024/01/01';
    }

    if (controlErrors?.matDatepickerMax) {
         // Any custom logic in case needs to apply
      errors['matDatepickerMax'] = 'Max Date can't be less than e.g 2024/12/31';
    }

    if (controlErrors?.matDatepickerFilter) {
     // Any custom logic in case needs to apply
      errors['matDatepickerFilter'] = 'Invalid date';
    }
  }

  if (Object.keys(errors).length === 0) {
    return [];
  }

  return Object.keys(errors).map(key => {
    switch (key) {
      case 'matDatepickerMin':
      case 'matDatepickerMax':
      case 'matDatepickerFilter':
        return errors[key];
      default:
        return '';
    }
  });
}