How to fire Angular 5 async validator onblur for FormGroup

user_7883103 0
Viewed 16489

I am using Angular version 5.0.1 and I'm trying to fire an AsyncValidator on a FormGroup on a blur event on one of the FormControls in the FormGroup.

I can get onBlur to work on a form control using the following:

name: ['', {updateOn: 'blur'}]

However, when I try to apply it to a FormGroup it doesn't work.

Is it possible to only fire an AsyncValidator onBlur on a FormGroup, and if not, what is the best way to execute the validator only when the user has finished entering data?

My only other option at the moment is to us some sort of debounce wrapper for my validator.

Just reading through here and it appears I should be able to use updateOn: 'blur' for a form group.

After new FormGroup(value, {updateOn: 'blur'})); new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

onblur angular5 javascript
4 Answers

It works on my side. Be aware that the FormBuilder may not support this yet.

this.formGroup = new FormGroup({
  name: new FormControl('', {validators: []})
}, {
  updateOn: 'blur'
});
user_14166960

I use this code snippet combining AbstractControlOptions with FormBuilder:

 constructor(private formBuilder: FormBuilder) { }
 
 this.signUpForm = new FormGroup(
   this.formBuilder.group({
     'email':    ['', ValidationUtils.emailValidators()],
     'fullname': ['', ValidationUtils.fullnameValidators()],
     'idCard':   ['', ValidationUtils.idCardValidators()],
     'username': {value: '', disabled: true}
   }).controls, {
     updateOn: 'blur'
   }
 );
user_72453790
Related