Question

我有一个问题，我最初认为这是一个正则表达式错误，但我推断出材料数据选择器如何将日期字符串作为完整日期对象而不是字符串放入输入中是一个问题输入中显示日期的版本，从而设置验证消息。

以下是我如何使用它，然后两个屏幕截图显示同一日期未通过日期选择器验证，并在日期选择器被删除/注释掉并简单输入输入时传递它。 / p>

<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准确地获取材料datepicker在输入中放置的日期字符串，如图所示，而不是它实际放入的完整日期对象。有人可以帮助我我将如何去做？

Answer 1

Angular Material Datepicker已经有验证器，你只需要为datepicker创建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]
  ...

问候。

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

1 个答案: