如何在angular中使用自定义验证来验证invalidate date

Question

我通过使用自定义验证器创建一个日期验证器，但当我打印错误时，它显示为空。我试图输入像2222-22-22这样的中间日期，它接受，这里我使用自定义验证器来限制这样的无效日期。

my code is.

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)])
});