如何使用自定义验证以角度验证无效日期

尼丁·桑万

我正在使用自定义验证器创建日期验证器，但是当我打印错误时它显示为空。我正在尝试输入它接受的日期，例如 2222-22-22，这里我使用自定义验证器来限制此类无效日期。

我的代码是..

myFrom: FormGroup;
cosntructor(private myService:ValidatorsService){
this.myForm = new FormGroup({
date: new FormControl('',[Validators.required,this.myService.ValidateDate])
});
}

我的验证服务有

ValidateDate=(control: AbstractControl): ValidationErrors | null => moment(control.value).format('YYYY') < '1900'?{ValidateDate:{value:true}}:null

也在html中

<form [formGroup]="myForm">
<mat-from-field [formGroup]="myForm">
<mat-label>Enter Date</mat-label>
<input matInput type="datetime-local" [step]="1" formControlName="date" required >
<mat-error *ngIf="myForm.controls.date.hasError('required')">
Please Enter Date
</mat-error>
<mat-error *ngIf="myForm.controls.date.errors?.ValidateDate">
Invalid  Date
</mat-error>{{myForm.get('date')?.errors | json}}
</mat-from-field>
</form>

每当我插入像 1111-11-11、2222-22-22 或 4444-44-44 这样的日期时，它应该给出一个错误的无效日期。或者日期应该大于1900。但是结果它没有给出任何错误，我该如何实现这个。

米克尔克里斯滕森

您必须处理moment.format返回字符串的特殊情况Invalid date

export function minYearValidator(year: number) {
   return (control: AbstractControl) => {
     const validationString = moment(control.value).format("YYYY");
     if(validationString === "Invalid date" || Number(validationString) < year)
      return {ValidateDate: {value: true}}
     return null
   }
}

对于您的表格：

import {minYearValidator} from './path/to/function/file';

this.myForm = new FormGroup({
date: new FormControl('',[Validators.required, minYearValidator(1900)])
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。