角度材质日期选择器验证

Question

我很难将验证添加到日期选择器中。这是一个堆栈链接。你可以看到代码库

我的日期选择器应该只允许DD MMM YYYY格式。它不应允许DD-MM-YY、DD/MM/YYYY等。

我放了一条警告信息。它工作正常。但是，日期选择器自己的边界验证无法正常工作。我该如何处理这个问题？不应要求日期选择器。

这在typescript文件中。

export const MY_FORMATS = {
parse: {
dateInput: 'DD MMM YYYY',
},
display: {
dateInput: 'DD MMM YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'DD MM YYYY',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@Component({
selector: 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.html',
styleUrls: ['datepicker-overview-example.css'],
providers: [
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE],
},
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
],
})
export class DatepickerOverviewExample {
regexPattern = /^(([1-9])|([0][1-9])|([1-2][0-9])|([3][0-1]))(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)d{4}$/gi;
date = new FormControl('', [Validators.pattern(this.regexPattern)]);
getErrorMessage(val: string): string {
const regexPattern = /^(([1-9])|([0][1-9])|([1-2][0-9])|([3][0-1]))(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)d{4}$/gi;

const value = val.replace(/s+/g, '');
const isValid = regexPattern.test(value);
console.log(isValid);
// console.log(this.date.valid);
if (!isValid && val !== '') {
return 'Invalid input: Please input a string in the form of DD MMM YYYY';
}
return '';
}
}

这是模板。

<mat-form-field appearance="legacy">
<input
matInput
[matDatepicker]="picker"
placeholder="Choose a date"
#pickerInput
[formControl]="date"
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="date.invalid">{{getErrorMessage(pickerInput.value)}}</mat-error>
</mat-form-field>

提前感谢！

Answer 1

我从valid检查中抽象出来，创建了一个自定义验证器，它应该可以工作。您的模式检查并没有像您预期的那样检查ISO字符串，我认为它是根据内部Moment Obj angular datepicker使用的进行检查的。

export function dateRegexValidator(
control: AbstractControl
): { [key: string]: boolean } | null {
const regexPattern = /^(([1-9])|([0][1-9])|([1-2][0-9])|([3][0-1]))(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)d{4}$/gi;
let val = control.value;
const isValid = regexPattern.test(val);
if (isValid) {
return { dateRegex: true };
}
return null;
}

<mat-form-field appearance="legacy">
<input
matInput
[matDatepicker]="picker"
placeholder="Choose a date"
#pickerInput
[formControl]="date"
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="date.errors?.dateRegexValidator"
>{{getErrorMessage(pickerInput.value)}}</mat-error
>
</mat-form-field>

示例：https://stackblitz.com/edit/angular-b1auah-nvrb3c?file=src%2Fapp%2Fdatepicker-概述-示例.ts

Answer 2

错误源于Validators.pattern()假定control.value是字符串。然而，control.value是一个对象。

console.log(this.date.value);

Object { _isAMomentObject: true, _i: {…}, _isUTC: false, _pf: {…}, _locale: {…}, _d: Date Wed Mar 23 2022 00:00:00 GMT-0400 (Eastern Daylight Saving Time), _isValid: true }

而在getErrorMessage()调用中，您得到的是HTMLInputElement的值，而不是FormControl的值。

您使用的组件具有内置验证和自动格式，因此不需要验证器。您已经提供了格式，因此您可以信任它来完成它的工作。

要获得格式化的字符串，可以进行

@ViewChild('pickerInput') pickerInput?: ElementRef;
get formattedDate(): string | undefined {
return this.pickerInput?.nativeElement.value;
}

或者手动转换this.date.value中的对象。您可以在提交之前仔细检查字符串是否有效，这将表明日期选择器已损坏。