材料2日期選擇器與日期模式驗證衝突的

Question

我有我最初以爲是一個正則表達式的錯誤問題，但我推斷，這是多麼的材料日期選擇是把日期字符串到輸入作爲一個完整的問題日期對象，而不是因爲它是在輸入示出，並且從而掀起一個驗證消息的日期的字符串版本。

下面是我如何使用它，然後的兩個屏幕截圖顯示了同一日期驗證失敗的日期選擇器，並通過它，如果日期選取器被刪除/註釋掉，簡單地輸入到輸入。

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

隨着的DatePicker

沒有的DatePicker

而這是所使用的驗證器，執行以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])$')]], 

我希望能夠使用的日期選擇器來獲得確切日期字符串日期選擇如圖所示的輸入的地方，而不是完整的日期對象時，它實際上是在把材料。有人可以幫我指點迷津我會怎麼做呢？

Answer 1

角材料日期選擇器已經驗證，你只需要創建formControlName的日期選擇器，但沒有validators.pattern（「正則表達式」）。

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

問候。