CODEWITHSUNDEEP
javascriptangulartypescriptvalidationangular-reactive-forms
TooLiPHoNe.NeT
TooLiPHoNe.NeT

Reputation: 499

Angular reactive form with custom form-level validator AND updateOn 'blur' option doesn't works

I have problems combining :

I made a simple stackblitz to show the problem :

https://stackblitz.com/edit/angular-url9uc?devtoolsheight=33&file=src/app/app.component.ts

CASE 1 : KO

'updateOn' option set to 'blur'.

We can see that specific field validators (required / email) are correctly fired, only when we loose focus on the input text field.

BUT the cross-field global validator (check that fields are the same) is not fired!

CASE 2 : OK

'updateOn' option is not defined.

We can see that specific field validators (required / email) are correctly fired, in real time each time a value change in the input text field.

AND the cross-field global validator (check that fields are the same) is correctly fired!

I guess I have a problem in my custom validator or the way I use it, but I don't manage to figure it out why...

Thanks for your help!

Upvotes: 1

Views: 670

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4800

If you'll take a look at your stackblitz, you'll see that in your buildForm() and buildForm2() you're using deprecated overload of the formbuilder.group() with signature:

(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; })

You should use type-safe version:

(controlsConfig: {
    [key: string]: any;
}, options?: AbstractControlOptions)

What this means in practice? The configuration part of your form should have validators instead of validator (note the plural version):

validators: CustomValidator.equalValueValidator("email", "confirmEmail"),

Then everything will work as expected and updateOn will be actually used for the validators.

Upvotes: 1

Related Questions