i am trying to add validation to email.
Structure : using reactive form, get email and check if already exist using filter javascript.
component.ts:
isUniqueEmail(): ValidatorFn {
return (control: AbstractControl): any | null => {
if(control.value.email != null){
this.httpService
.getDataFromServer("api/employees?company_branch=" +this.user.branch_id)
.subscribe((resp) => {
var data = resp.data.employee;
const found = data.filter(v => v.email == control.value.email);
if(found.length !== 0){
console.log("found one");
return {exist: true}
}
});
}
}
}
if email already exist console.log print found and every thing work fine.
declaration of form control:
this.employeeForm = new FormGroup({
email: new FormControl(null,
[
Validators.required,
Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"),
ValidatorsSettings.notOnlyWhitespace,
]),
),{validators: this.isUniqueEmail()}}
in html :
<div class="row">
<div class="from-group">
<label for="Email"> Email </label>
<mat-divider></mat-divider>
<input
type="text"
id="Email"
class="form-control"
formControlName="email"
/>
<div *ngIf="employeeForm.get('email').invalid && (employeeForm.get('email').touched || employeeForm.get('email').dirty)" class="help-block">
<div *ngIf="employeeForm.get('email').errors.required || employeeForm.get('email').errors.notOnlyWhitespace" class="help-block">
Email is required
</div>
<div *ngIf="employeeForm.get('email').errors.pattern" class="help-block">
Email must be a valid email address format
</div>
<mat-error *ngIf="employeeForm.errors?.exist" class="help-block"
>Email Already Exist</mat-error>
</div>
</div>
</div>
error not showing ! what i do wrong ?
Since the validator is using a service to request the response it should be an asyncValidator. The code could end up as:
isUniqueEmail(): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors>=> {
if(control.value.email != null){
return this.httpService
.getDataFromServer("api/employees?company_branch="+this.user.branch_id).pipe(
.map((resp) => {
var data = resp.data.employee;
const found = data.filter(v => v.email == control.value.email);
if(found.length !== 0){
console.log("found one");
return {exist: true}
}
});
}
else return null;
}
}