Angular 11 反应式表单验证：开始日期小于结束日期

如何解决Angular 11 反应式表单验证：开始日期小于结束日期

我正在使用响应式表单并尝试对开始日期和结束日期使用跨字段验证。 开始日期应该小于结束日期。此外，用户不应选择大于今天的日期。 注意：我没有使用 matdatepicker。 以下是我的实现：

export const dateValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const start = control.get('dateStart');
const end = control.get('dateEnd');
console.log("validators called");  
return start !== null && end !== null && start < end 
? null :{ dateValid:true };

};

HTML

<p *ngIf="myForm.errors?.dateValid && (myForm.touched ||myForm.dirty)">Please add a valid from and to date</p>

myform.ts

 constructor(private fb:FormBuilder) {
   this.myForm = new FormGroup({
      dateStart: new FormControl('',Validators.required),dateEnd: new FormControl('',Validators.required)
    },{validators:dateValidator});
}

谁能帮我弄清楚代码有什么问题？

解决方法

您需要检查 control.value，而不是控件本身。

export const dateValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const start = control.get('dateStart');
const end = control.get('dateEnd');
console.log("validators called");  
return start.value !== null && end.value !== null && start.value < end.value 
? null :{ dateValid:true };
  }