首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用格式控制验证md-数据报警器

使用格式控制验证md-数据报警器
EN

Stack Overflow用户
提问于 2017-09-11 16:18:49
回答 1查看 918关注 0票数 0

我对角材料2很陌生,并试图在官方的角度网站上验证出生日期(道布)表单字段(如下面的例子 )

因此,在input-errors-example.html中,我添加了表单字段,如下所示

代码语言:javascript
运行
复制
  <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格式

代码语言:javascript
运行
复制
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)
    ]);

} 

上面的例子是柱塞,但是这里我不能选择日期,也不能看到任何错误消息。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-11 16:39:42

要使FormControl使用regex,必须使用null实例化FormControl,而不是“”空字符串:

代码语言:javascript
运行
复制
dobFormControl = new FormControl(null, [
        Validators.required,
        Validators.pattern(DOB_REGEX)
    ]);

你的工作现在柱塞这里

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46160156

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档