材料2 Datepicker与日期模式验证器冲突

Question

我有一个问题，我最初认为是regex错误，但我推断出这是material datepicker如何将日期字符串作为完整的日期对象而不是输入中显示的日期的字符串版本放入输入中的问题，从而引发验证消息。

下面是我如何使用它，然后是两个屏幕截图，显示相同的日期未能通过日期选择器验证，如果日期选择器被删除/注释掉并简单地键入输入，则传递该日期。

<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

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

Angular Material Datepicker已经有验证器，您只需要为Datepicker创建formControlName，而不需要validators.pattern('reg exp')。

<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位数的年数。

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