My goal is to validate an email address with the server to check if it is already registered, but I only want this validation to occur on blur and not on every value change.
I have the ability to add multiple controls to my form, and here is how I have structured it:
ngOninit(){
this.userForm = this._formBuilder.group({
others: this._formBuilder.array([]) //multiple
});
this.onAddControl(); //allows adding multiple items
}
onAddControl(){
return this._formBuilder.group({
email: ['' [this._validateServ.emailDoesntExistsValidator.bind(this._validateServ)]
],
});
}
}
Now, let's take a look at the _validateServ:
emailDoesntExistsValidator(control) {
if (control.value != undefined) {
if(!this.emailValueValidator(control)){
return this._authService.checkExists("email",control.value) //http request
.map(response => {
if (response) {
return {'emailTaken': true};
}
});
}
}
}
I want the email validation to trigger on blur, as it involves an HTTP request and I would like to display a waiting message while the request is being processed. The current setup validates on each keypress, which is not ideal for me.