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

Question

我正在使用反应式表单并尝试对开始日期和结束日期使用跨域验证。 开始日期应早于结束日期。此外，用户不应 select 日期大于今天的日期。 注意：我没有使用 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});
}

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

Answer 1

您需要检查 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 };
  }