如何使用pattern验证mat-datepicker输入？
如何使用pattern验证mat-datepicker输入？
提问于 2018-04-20 00:55:00
我使用的是mat-datepicker，用户可以手动输入日期。我希望能够执行以下操作来验证日期，并确保它遵循MM/DD/YYYY模式：
const dobRegex: RegExp = /((?:0[1-9])|(?:1[0-2]))\/((?:0[0-9])|(?:[1-2][0-9])|(?:3[0-1]))\/(\d{4})/;
public dob: FormControl = new FormControl(null, Validators.compose( [ Validators.required, Validators.pattern(dobRegex)]));但是，当我执行上面的操作时，它不起作用，因为mat-datepicker正在将任何带有数字的输入转换为Date对象。任何不是数字的其他输入都会将其转换为null。
public date(c: FormControl) {
console.log(c.value) // This value is already a Date object or null
}有没有办法可以使用pattern验证手动输入的文本？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-24 19:58:37
您可以通过将输入的最小值设置为10个字符长度，将输入的最大值设置为10 characters.Then来解决此错误。当您输入数字时，日期选择器将验证日期以及它是否为10个字符长度。
另一种方法是通过在模块中提供自定义组件来覆盖mat-date选择器解析方法。
providers: [{ provide: DateAdapter, useClass: UserDateAdapter },]然后在组件中
import { NativeDateAdapter, DateAdapter } from '@angular/material';
export class UserDateAdapter extends NativeDateAdapter {
parse(value: any): Date | null {
//Your custom parse method
if ((typeof value === 'string') && (value.indexOf('/') > -1) &&
value.length == 10) {
const str = value.split('/');
const year = Number(str[2]);
const month = Number(str[0]) - 1;
const date = Number(str[1]);
return new Date(year, month, date);
} else {
return new Date(undefined);
}
}Stack Overflow用户
发布于 2018-04-25 07:10:43
我使用切换到Moment的Hacky解决方案。
import { AbstractControl } from '@angular/forms';
import * as moment from 'moment';
import { RegEx } from 'app/consts/regex.const';
export class DateValidator {
public static isValidFormat(control: AbstractControl) {
if (moment.isMoment(control.value)) {
const input = control.value.creationData().input;
if (typeof input === 'string' && (RegEx.DATE).test(input)
|| typeof input === 'object' && input.hasOwnProperty('year') &&
input.hasOwnProperty('month') && input.hasOwnProperty('date')) {
return null;
}
}
if (!control.value && control.errors && control.errors.matDatepickerParse) {
const datePickerText = control.errors.matDatepickerParse.text;
if (!datePickerText) {
return null;
}
}
return { pattern: true };
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49926399
复制相关文章
相似问题
腾讯云开发者
