Angular reactive custom validator not working

Question

I wrote a simple validator comparing two date form controls on a form group.

Simple check: the maturityDate must be > than valueDate, if not invalidate the form group.

Below is the definition of the form group:

this.datesForm = this._fb.group(
  {
    tradeDate: [new Date(), Validators.required],
    valueDate: [new Date(), Validators.required],
    maturityDate: [new Date(), [Validators.required]],
    dayCount: [{value: 0, disabled: true}, Validators.required]
  },
  {
    validator: validateMaturityDate
  }
);

And here's my validator.ts

import { AbstractControl } from '@angular/forms';

export function validateMaturityDate(datesForm: AbstractControl) {
    const valueDate: Date = datesForm.get('valueDate').value;
    const maturityDate: Date = datesForm.get('maturityDate').value;

    if (maturityDate <= valueDate) {
        datesForm.setErrors({ 'validMaturity': true });
    } else {
        datesForm.setErrors({ 'validMaturity': false });
    }
    return;
}

If I select a maturity date from the datepicker that is before the value date, my expectation would have been for the form group to be invalid. But that's not the case, it keeps being valid in both cases. Am I doing something wrong?

https://i.stack.imgur.com/KzRJg.png https://i.stack.imgur.com/KEM1v.png

Muhammed Albarmavi · Accepted Answer · 2018-09-19T10:56:48.783

4

Update the validateMaturityDate function to return an object related to the error or null

export function validateMaturityDate(datesForm: AbstractControl)  {
    const valueDate: Date = datesForm.get('valueDate').value;
    const maturityDate: Date = datesForm.get('maturityDate').value;

    if (maturityDate <= valueDate) {
        return { 'validMaturity': true }; 
    } else {
        return null;
    }
}

ValidatorFn interface

edited Sep 19 '18 at 10:56

answered Sep 19 '18 at 10:48

Muhammed Albarmavi

23,240
8
66
91

Sadly for me that doesn't work and I have no idea why. I even tried setting using both setErrors and returning validation object - still no result. – Ivan Yurchenko Jun 25 '20 at 16:31
1

@IvanYurchenko hi , I will love to help you can create your own question and share your code , maybe your implementation is different or your have another error – Muhammed Albarmavi Jun 27 '20 at 20:47
Hey, I figured out what was wrong with my code, seems like your answer is working, thank you so much! – Ivan Yurchenko Jun 29 '20 at 11:49
HI, Thank you. In my case I forgot to add ".value" in the expression "form.get dates ('valueDate').value" – nehemie konan Jun 07 '21 at 11:13

score 3 · Answer 2 · answered Nov 30 '18 at 00:08

The answer from malbarmawi is spot on. This question was exactly the same scenario for which I couldn't get the formGroup validator to execute and spun my wheels for hours.

However in my case I had listed the validator in the FormGroup under a key called validators instead of validator.

This is correct: { validator: validateMaturityDate } This doesn't execute: { validators: validateMaturityDate }

The angular.io documentation here shows validators as plural. So either I'm missing something or the documentation might need a tweak.

https://v6.angular.io/guide/form-validation#cross-field-validation

Angular reactive custom validator not working

2 Answers2