Conditional custom validation of reactive form not working - Angular 9

Question

I must be missing something:

<input
                  formControlName="endDate"
                  type="date"
                  id="endDate"
                  class="form-control"
                  (change)="onDateChange()"
                  required
                />
                <div *ngIf = "timesheetForm.get('endDate').errors?.invalidEndDate">
                <small class="text-danger"> TTTT</small></div>

And the .ts

  this.timesheetForm = this.fb.group({
      endDate: ["", DateValidators.invalidEndDate],
   }, {
     validator: DateValidators.invalidEndDate
   });

    const endDateControl = this.timesheetForm.get('endDate');

    endDateControl.valueChanges.subscribe((value) => {
        if (value) {
        this.timesheetForm.get('endDate').setValidators([DateValidators.invalidEndDate]);
      } else {
        this.timesheetForm.get('endDate').clearValidators();
      }
    });

And here's my custom validator

export class DateValidators {

    static invalidEndDate(formGroup: FormGroup): ValidationErrors | null  {
        let startDateTimestamp: number;
        let endDateTimestamp: number;
        for (const controlName in formGroup.controls) {
            if (controlName.indexOf("startDate") !== -1) {
                startDateTimestamp = Date.parse(formGroup.controls[controlName].value);
            }
            if (controlName.indexOf("endDate") !== -1) {
                endDateTimestamp = Date.parse(formGroup.controls[controlName].value);
            }
        }
        return (endDateTimestamp < startDateTimestamp) ? { invalidEndDate : true} : null;
    }

It's returning invalidEndDate:true, so the validation is working as expected but I am unable to display error message properly.

Hmm.. can your try to add endDateControl.updateValueAndValidity() after your if (value) condition? — MikeOne
– MikeOne, Commented Jan 9, 2021 at 15:33
I tried it before, tried it once again now, still no error message. — unknown
– unknown, Commented Jan 9, 2021 at 15:35

blackgreen · Accepted Answer · 2023-03-23 12:08:48Z

2

ValidatorFn INTERFACE

A function that receives a control and synchronously returns a map of validation errors if present, otherwise null.

based on angular.io docs:

interface ValidatorFn {
  (control: AbstractControl): ValidationErrors | null
}

You must use control not formGroup in validator constructor.

edited Mar 23, 2023 at 12:08

blackgreen♦

46.9k29 gold badges171 silver badges162 bronze badges

answered Jan 9, 2021 at 15:37

Masoud Bimmer

7,9016 gold badges32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditional custom validation of reactive form not working - Angular 9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related