Angular 8 Custom Validator никогда не возвращает ошибок

Question

Я создал группу форм с пользовательским валидатором для сравнения dtDebut и dtFin (dtFin должен быть выше, чем dtDebut):

ngOnInit(){
  this.pensionForm = this.fb.group({
  dtDebut: ['', Validators.required],
  dtFin: ['', [this.dateValidator]],
  montant: ['', Validators.required],
  nivInv: ['', Validators.required],
});


get f() {
    return this.pensionForm.controls;
}

onSubmit2() {
    this.submitted = true;
    console.log(this.f.dtFin);
    if (this.pensionForm.invalid) {
      return;
    }
}


dateValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (control.value < this.f.dtDebut.value) {
            return { dateValidator: true };
        }
    return null;
    }; 
}

Но элемент управления dtFin никогда не возвращает мне ошибку, элемент управления формы всегда "Действителен". И более того, атрибут f не известен ... Как я могу отловить ошибку?

Answer 1

Поскольку вы хотите сравнить два элемента управления формой, вам нужно установить валидатор для группы форм. Это можно сделать следующим образом.

dateValidator(group: FormGroup) {
    if(group.get('dtFin').value < group.get('dtDebut').value) {
        return { dateValidator: true };
    } else {
    return null; 
    }
}

ngOnInit(){
    this.pensionForm = this.fb.group({
        dtDebut: ['', Validators.required],
        dtFin: ['', Validators.required],
        montant: ['', Validators.required],
        nivInv: ['', Validators.required],
    }, {validators: [dateValidator]});
 }

Answer 2

попробуйте ниже пути

export function dateValidator(dtFin: FormControl,dtDebut : FormControl ) {
    return (control: AbstractControl): ValidationErrors | null => {
    if (dtFin.value < dtDebut.value) {
      return { dateValidator: true };
    }else{
        return null;
     }
   }
}



  ngOnInit(){
  this.pensionForm = this.fb.group({
  dtDebut: ['', Validators.required],
  dtFin: ['', Validators.compose([Validators.required, dateValidator])],
  montant: ['', Validators.required],
  nivInv: ['', Validators.required],
 });
}