日付ピッカーの角度2の検証

Question

私は日付ピッカーのカスタムディレクティブを使用しています。テンプレートは次のとおりです。

<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だけに制限したい

Answer 1

これにチェックを入れてください。Plunker

は、ユーザーがフィールドに任意の値を入力するが、彼は彼が必要なパターンを入力するためのプロンプトが表示されますフォームを送信することができないことができるようになりますRegrex

<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> 

を更新しました。