How to user updateOn blur in FormBuilder

Question

I have a custom async validator, and I want to set updateOn: 'blur' property using FormBuilder:

myForm = this.formBuilder.group({
   email: ['', [Validators.required], [this.myAsyncValidator]]
   // ...
});

I tried this but it does not work:

email: ['', [Validators.required], [this.myAsyncValidator, {updateOn: 'blur'}]]

Note

I DO NOT want to create form control instances manually like the following:

myForm = new FormGroup({
    email: new FormControl('', {asyncValidators: [this.myAsyncValidator]}, updateOn: 'blur')
});

Vivianne

you need use in the way "options" {validators:...,asyncValidators:...,updateOn:'blur'}, see #52167648 – Dominion

I think @Dominion has the right idea. Check out the docs: angular.io/api/forms/… – Grantor

Answer 1

there are two ways to achieve that -

myForm = this.formBuilder.group({email: this.formBuilder.control('', {updateOn: 'blur', validators: [], asyncValidators: []})})

or,

myForm = this.formBuilder.group({email: ['', {updateOn: 'blur', validators:[], asyncValidators: []}]})

Disillusionize

Welcome, Nawaz. Instead of just including code, could you edit your answer to also provide an explanation? Why do these work, whereas the OP's code doesn't? What's doing the work here? Is there a reason one of these syntaxes might be preferred over the other? – Farcical

The second option doesn't seem to work anymore since Angular 14. – Gott

Answer 2

I want to add more answer for this question.

Here is the code at the library:

So, from your question, look like you are trying to set updateOn for email formControl and you are setting 3 arguments. This is not correctly.

Change

myForm = this.formBuilder.group({
   email: ['', [Validators.required], [this.myAsyncValidator]]
   // ...
});

to

myForm = this.formBuilder.group({
   email: ['', {validators: Validators.required, asyncValidators: this.myAsyncValidator, updateOn: 'blur'}]
   // ...
});

Hussein