マテリアル2日付ピッカーと日付パターンバリデーターとの競合

Question

当初は正規表現エラーと思われる問題がありましたが、材料の日付ピッカーが日付文字列を入力として完全に入力する方法に問題があると推測しました入力に表示されている日付の文字列バージョンの代わりに日付オブジェクトを使用し、検証メッセージを表示します。

以下は、私がそれを使用している方法と同じ日付を示す2つのスクリーンショットが日付ピッカーで妥当性検査に失敗し、日付ピッカーが削除/コメントアウトされて入力に単純に入力された場合に渡します。日付ピッカー

で

<div class="col-xs-12 col-sm-6"> 
            <div class="form-group" [ngClass]="{'td-group-error': (changeForm.get('changeInfoFG.dateSubmitted').touched || changeForm.get('changeInfoFG.dateSubmitted').dirty) && !changeForm.get('changeInfoFG.dateSubmitted').valid }"> 
             <span><input id="dateSubmittedId" class="form-control" type="text" formControlName="dateSubmitted" [mdDatepicker]="sbdate" style="width:90%;display:inline-block"> 
            <md-datepicker-toggle [for]="sbdate"></md-datepicker-toggle> 
            <md-datepicker #sbdate></md-datepicker></span> 
             <div class="error-block" *ngIf="(changeForm.get('changeInfoFG.dateSubmitted').touched || changeForm.get('changeInfoFG.dateSubmitted').dirty) && !changeForm.get('changeInfoFG.dateSubmitted').valid" 
              role="alert" style="color: #ae0101"> <strong>!</strong> 
              <span *ngIf="changeForm.get('changeInfoFG.dateSubmitted').errors.required">Required</span> 
              <span *ngIf="changeForm.get('changeInfoFG.dateSubmitted').errors.pattern">Date must be mm/dd/yyyy, date is currently: {{changeForm.get('changeInfoFG.dateSubmitted').value}}</span> 
             </div> 
            </div> 
           </div> 

日付ピッカー

、これはM/Dの日付の短い日付の文字列表現を強制する、使用されるバリあるなし/ yyyy/mm/dd/yyyy形式です。

dateSubmitted: [null, [Validators.required, Validators.pattern('^(?:(?:10|12|0?[13578])/(?:3[01]|[12][0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|(?:11|0?[469])/(?:30|[12][0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|0?2/(?:2[0-8]|1[0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|0?2/29/[2468][048]00|0?2/29/[3579][26]00|0?2/29/[1][89][0][48]|0?2/29/[2-9][0-9][0][48]|0?2/29/1[89][2468][048]|0?2/29/[2-9][0-9][2468][048]|0?2/29/1[89][13579][26]|0?2/29/[2-9][0-9][13579][26])$')]], 

私は、それが実際に入れている完全な日付オブジェクトとは対照的に、示すように、日付文字列を正確に入力中の物質DatePickerの場所を取得するには日付ピッカーを使用できるようにしたいと思います。誰かが私の図助けることができますどのように私はそれについて行くだろうか？

Answer 1

角材Datepickerにはすでにバリデータがありますが、validate.pattern（ 'regExp'）を除いて、datepickerのformControlNameを作成する必要があります。

<md-form-field class="form-field" color="accent"> 
    <input mdInput [mdDatepicker]="picker" name="birthDate" 
    formControlName="dateCtrl"> 
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle> 
    <md-datepicker #picker></md-datepicker> 
</md-form-field> 

そして、これはformControlNameはバリ

dateCtrl: [''] 

せずに使用されている私は、mm/dd/yyyy形式のための検証のほとんどをテストし、唯一の年にエラーを検出しました。それは5桁の年を受け入れることができます。

カスタムバリデータ カスタムバリデータを実行できます。まず、制御値が文字列かどうかを確認し、フォーマット日付にregExpを適用します。

import { ValidatorFn, AbstractControl } from "@angular/forms"; 

export function dateFormatValidator(control: AbstractControl) { 
    let date = control.value; 
    if (date) { 
     if (typeof date === 'string' && typeof date !== null) { 
      if (/[0-9]{4}-(0?[1-9]|1[0-2])-(0?[1-9]|1\d|2\d|3[01])/.test(date)) 
     { 
      return null; 
     } else { 
      return { 'forbiddenName': { value: control.value } }; 
     } 
     } 

    return null; 
    } 

次に、コントロール定義でカスタムバリデータをインポートする必要があります。

... 
    dateCtrl: [null, dateFormatValidator] 
    ... 

よろしく。