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')
});

Answer 1

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'}]
   // ...
});

Answer 2

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: []}]})