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

问候。