角质材料数据选择器验证
角质材料数据选择器验证
提问于 2022-03-20 22:48:08
我在努力为选日期的人添加验证。这是一个stackblitz链接。你可以看到代码库
我的日期选择器应该只允许DD 格式。它不应该允许DD-MM-YY，DD/MM/YYYY，等等.
我发了个警告信息。它工作正常。但是，日期选择器本身的边界验证不能正常工作。我该如何处理这个问题？不应要求日期选择器。
这是在类型记录文件中。
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>提前感谢！
回答 2
Stack Overflow用户
发布于 2022-03-21 04:26:32
为了创建一个自定义验证器，我从valid检查中抽象出来，它应该能工作。您的模式检查没有像您预期的那样检查ISO字符串，我认为它是根据Obj角数据采集器正在使用的内部时刻进行检查的。
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-overview-example.ts
Stack Overflow用户
发布于 2022-03-21 08:11:43
错误来自于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中的对象。在提交之前，您可以反复检查字符串是否有效，这将指示日期选择器已损坏。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71551242
复制相关文章
相似问题
腾讯云开发者
