我是 Angular Material 2 的新手,并尝试验证出生日期 (DOB) 表单字段,如 following example在 Angular 官方网站
因此,在 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对于上面的示例,但在这里我无法选择日期或看不到任何错误消息。
最佳答案
为了使 FormControl 能够与正则表达式配合使用,您必须使用 null
而不是 '' 空字符串来实例化 FormControl:
dobFormControl = new FormControl(null, [
Validators.required,
Validators.pattern(DOB_REGEX)
]);
你现在的工作笨蛋here
关于javascript - 使用 formcontrol 验证 md-datepicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46160156/