Angular2中日期选择器的验证答案

【问题标题】：Validation for date picker in Angular2Angular2中日期选择器的验证
【发布时间】：2017-08-03 07:26:05
【问题描述】：

我正在为日期选择器使用自定义指令。这是模板：

    <div class="input-group">
      <input type="text" id="tbxDate"
         pattern="\d{1,2}/\d{1,2}/\d{4}"
         class="form-control" (change)="changeValue($event)"
         (blur)="onTouchedCallback()"/>
      <div class="input-group-btn">
        <button class="btn" (click)="show()">
            <i class="fa fa-calendar"></i></button>
     </div>
    </div>

    <div id="calendar-popup" class="calendar-popup"
          [style.display]="panelVisible ? 'block' : 'none'" 
          [style.width]="width">
          <bootflat-date-picker id="btf" [options]="myDatePickerOptions" 
            (dateChanged)="selectDate($event)" [(selDate)]="selectionDate">
            </bootflat-date-picker>
    </div>

但是模式验证不起作用。它也采用字母数字。我想限制只服用 MM/DD/YY

【问题讨论】：

为什么不用输入类型为date
我试过了，但是弹出日历没有用，因为出现了内置日期模板。
这样您就可以将输入设置为只读并仅通过弹出权限进行限制
是的，但要求是两种方式都可以接受输入。有没有办法添加模式字段来限制输入因为我添加的那个不是由角度解析的
你能创建一个 plunker 吗？

标签： angular validation datepicker directive

【解决方案1】：

请查看Plunker。

更新了正则表达式

<div class="input-group">
  <input type="text" id="tbxDate"
     pattern="/^(0?[1-9]|1[012])[- \/.](0?[1-9]|[12][0-9]|3[01])[- \/.](19|20)?[0-9]{2})*$/"
     class="form-control" (change)="changeValue($event)"
     (blur)="onTouchedCallback()"/>
  <div class="input-group-btn">
    <button class="btn" (click)="show()">
        <i class="fa fa-calendar"></i></button>
 </div>

用户将能够在该字段中输入任何值，但他无法提交将提示他输入所需模式的表单。

【讨论】：