我正在使用最新的 Angular 和最新的 Angular Material。我有一个日期选择器，我想添加一些验证。文档说 required 属性应该开箱即用，但它似乎不像其他表单元素那样处理错误。

这是我的标记:

<mat-form-field class="full-width">
    <input matInput [matDatepicker]="dob" placeholder="Date of birth" [(ngModel)]="myService.request.dob" #dob="ngModel" required app-validateAdult>
    <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
    <mat-datepicker #dob></mat-datepicker>
    <mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>
</mat-form-field>

This works on the happy-path, so when a date is picked, the date ends up in the expected property in myService.

然而，验证并没有按照我期望的方式进行；在这种情况下，如果我点击进入该字段然后在没有输入日期的情况下离开该字段，那么输入确实获得红色样式，但是通常的[controlName].errors 对象不会被填充。这意味着以通常的方式显示错误消息(与同一页面上不是日期选择器的其他输入一起工作的方式)不起作用:

<mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>

*ngIf 永远不会为真，因为日期选择器似乎永远不会更新 dob.errors，所以错误消息永远不会显示，即使输入被设置为无效.

这样对吗？我错过了什么吗？

我还尝试添加一个自定义指令来验证使用日期选择器选择的日期是否表明用户已超过 18 岁:

export class AdultValidator implements Validator {
  constructor(
    @Attribute('app-validateAdult') public validateAdult: string
  ) { }

  validate(control: AbstractControl): { [key: string]: any } {
    const dob = control.value;
    const today = moment().startOf('day');
    const delta = today.diff(dob, 'years', false);

    if (delta <= 18) {
      return {
        validateAdult: {
          'requiredAge': '18+',
          'currentAge': delta
        }
      };
    }

    return null;
  }
}

在这种情况下，我尝试使用类似的 matError(除了链接到 dob.errors.validateAdult 之外)在适当的时候显示错误。

有趣的是，如果我选择一个小于 18 年前的日期，整个输入、标签等都会获得默认的红色错误样式，所以发生了一些事情，但我仍然看不到我的错误消息。

如有任何建议，我们将不胜感激!

确切版本:

Angular CLI: 1.6.3
Node: 6.11.0
OS: win32 x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.4
@angular/cli: 1.6.3
@angular/flex-layout: 2.0.0-beta.12
@angular/material-moment-adapter: 5.0.4
@angular/material: 5.0.4
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

最佳答案

我在我的 Angular Material Forms 中使用了 ErrorStateMatcher，它工作得很好。

你应该有一个看起来像这样的代码:

<mat-form-field class="full-width">
    <input matInput [matDatepicker]="dob" placeholder="Date of birth" formControlName="dob" required app-validateAdult>
    <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
    <mat-datepicker #dob></mat-datepicker>
    <mat-error *ngIf="dob.hasError('required')">Your date of birth is required</mat-error>
</mat-form-field>

和 typescript :

import { ErrorStateMatcher } from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(
    control: FormControl | null,
    form: FormGroupDirective | NgForm | null
  ): boolean {
    const isSubmitted = form && form.submitted;
    return !!(
      control &&
      control.invalid &&
      (control.dirty || control.touched || isSubmitted)
    );
  }
}


export class AdultValidator implements Validator {
  dob = new FormControl('', [
    Validators.required
  ]);

  matcher = new MyErrorStateMatcher();
}

您可以在这里查看更多相关信息:https://material.angular.io/components/input/overview

关于javascript - Angular 5， Angular Material : Datepicker validation not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48283415/