资料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])$')]],

我希望能够使用datepicker来准确地获取输入中的资料数据项中的日期字符串，而不是它实际放入的完整日期对象。有人能帮我弄清楚我会怎么做吗？

Answer 1

角材质数据报警器已经有验证器了，您只需要为数据报警器创建formControlName，而不需要validators.pattern('regExp')。

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

致以问候。