如何使用自定义验证来验证 angular 中的无效日期

Question

我正在使用自定义验证器创建日期验证器，但是当我打印错误时它显示为空。我正在尝试输入它接受的 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。但是结果它没有给出任何错误，我该如何实现它。

Answer 1

您必须处理 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)])
});

如何使用自定义验证来验证 angular 中的无效日期

How can validate invalidate date in angular by using custom validation

customvalidator

angular

angular-custom-validators