使用 formcontrol 验证 md-datepicker答案

【问题标题】：Validate md-datepicker using formcontrol使用 formcontrol 验证 md-datepicker
【发布时间】：2017-09-11 16:18:49
【问题描述】：

我是 Angular 材料 2 的新手，并尝试在 Angular 官方网站中验证出生日期 (DOB) 表单字段，例如 following example

所以在 input-errors-example.html 我添加了如下表单字段

  <md-form-field class="example-full-width">
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date" [formControl]="dobFormControl" onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 47' maxlength="10">
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
    <md-datepicker #picker></md-datepicker>
    <md-error *ngIf="dobFormControl.hasError('required') || dobFormControl.hasError('pattern')">
      Please enter a valid Date
    </md-error>
  </md-form-field>

然后在 input-errors-example.ts 文件中我添加了自定义正则表达式以接受 MM/DD/YYYY 格式

import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

const DOB_REGEX = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/;

@Component({
  selector: 'input-errors-example',
  templateUrl: 'input-errors-example.html',
  styleUrls: ['input-errors-example.css'],
})
export class InputErrorsExample {


    dobFormControl = new FormControl('', [
        Validators.required,
        Validators.pattern(DOB_REGEX)
    ]);

}

上面的例子是the Plunker，但在这里我无法选择日期或看不到任何错误消息。

【问题讨论】：

问题是 datePicker 产生一个 Date 对象，而不是一个字符串。您不需要 DOB_REGEX，因为只能选择有效日期，而只需将日期通过管道传输到 MM/DD/YYYY。查看此问题以获取有关格式化日期选择器项目的示例：stackoverflow.com/questions/46118812/…

标签： javascript angular angular-material2

【解决方案1】：

为了让您的 FormControl 与您的正则表达式一起使用，您必须使用 null 而不是 '' 空字符串来实例化 FormControl：

dobFormControl = new FormControl(null, [
        Validators.required,
        Validators.pattern(DOB_REGEX)
    ]);

你现在工作的笨蛋here

【讨论】：