Utilizing a custom asynchronous validator in Angular 8 that returns a Promise or Observable for validation purposes

Question

Utilizing a custom asynchronous validator in Angular 8 that returns a Promise or Observable for validation purposes

I am currently working on developing a custom async validator for my registration form. The purpose of this validator is to verify if an email is valid or not by utilizing a third-party API. Here is the reference link to the API website -

My approach involves implementing this validator using RxJs debounceTime and distinctUntilChanged. In addition to checking email validity, there are two other mandatory validations required in the form control. However, I keep encountering the following error - Error: Expected validator to return Promise or Observable.

I have explored various examples but none seem to address this issue effectively. Thank you for any assistance provided in advance.

Validator -

export class UniqueEmailValidator{
   static createValidator(_ajaxService : AjaxService){
        return (control : AbstractControl) =>{
            const apiKey = environment.emailValidatationKey;
            const baseUrl = 'https://api.zerobounce.net/v2/validate?';
            if(control.valid){
                return control
                .valueChanges
                .pipe(
                    debounceTime(800),
                    distinctUntilChanged(),
                    switchMap((email : string) => _ajaxService.apiCall('', `${baseUrl}api_key=${apiKey}&email=${email}&ip_address=''`, 'GET', true)),
                    map(res => res.json()),
                    map((validationStatus : any) => {
                        if (
                            validationStatus.status == "valid" &&
                            validationStatus.mx_found == "true"
                        ) {
                            return null
                        } else {
                            return { isEmailInvalid : true }
                        }
                    })
                )
            }
        }
    }
}

Register Component -

this.registration = this._formBuilder.group({
  firstName: new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-z A-Z]+$')
  ]),
  lastName: new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-z A-Z]+$')
  ]),
  email: new FormControl('', [
    Validators.required,
    Validators.pattern('[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}')
  ],UniqueEmailValidator.createValidator(this._ajaxService))
})

javascript angular typescript

Answer 1

Answer №1

Have you ever wondered why validators Observable is being piped from valueChanges Observable? It seems counterintuitive since the validator operates on value changes and when it's dirty. Moreover, the desired Observable is only returned if the control is valid. This means that if sync validators mark the control as invalid, the Observable won't be returned, potentially leading to errors.

Here's a different approach to consider:

class EmailValidator {
  static create(apiService: ApiService) {
    return (control: Control) => {
      const apiKey = config.key;
      const url = 'https://api.example.com/validate?';

      return timer(800).pipe(
        concatMap((email: string) =>
          apiService.call('', `${url}key=${apiKey}&email=${email}&ip=''`, 'GET', true)
        ),
        map(res => res.json()),
        map((status: any) => {
          if (status.status == 'valid' && status.mx_found == 'true') {
            return null;
          } else {
            return { isInvalidEmail: true };
          }
        })
      );
    };
  }
}}

I've applied a similar approach in a project where I needed to validate export paths in the filesystem. One question I have is about distinctUntilChanged. Isn't that already filtered?

Answer 2

Have you ever wondered why validators Observable is being piped from valueChanges Observable? It seems counterintuitive since the validator operates on value changes and when it's dirty. Moreover, the desired Observable is only returned if the control is valid. This means that if sync validators mark the control as invalid, the Observable won't be returned, potentially leading to errors.

Here's a different approach to consider:

class EmailValidator {
  static create(apiService: ApiService) {
    return (control: Control) => {
      const apiKey = config.key;
      const url = 'https://api.example.com/validate?';

      return timer(800).pipe(
        concatMap((email: string) =>
          apiService.call('', `${url}key=${apiKey}&email=${email}&ip=''`, 'GET', true)
        ),
        map(res => res.json()),
        map((status: any) => {
          if (status.status == 'valid' && status.mx_found == 'true') {
            return null;
          } else {
            return { isInvalidEmail: true };
          }
        })
      );
    };
  }
}}

I've applied a similar approach in a project where I needed to validate export paths in the filesystem. One question I have is about distinctUntilChanged. Isn't that already filtered?

Answer 3

Answer №2

This is the solution I came up with to address my issue -

Validator -

export class UniqueEmailValidator {
    static createValidator(_ajaxService: AjaxService) {
        let validatorSubject$ = new Subject();
        let debouncedSubject$ = new Subject<string>();

        debouncedSubject$
        .pipe(debounceTime(500), distinctUntilChanged())
        .subscribe((email: string) => {
            const apiKey = environment.emailValidatationKey;
            const baseUrl = 'https://api.zerobounce.net/v2/validate?';
            _ajaxService.apiCall('', `${baseUrl}api_key=${apiKey}&email=${email}&ip_address=''`, 'GET', true).subscribe({
                next: (validationData : IEmailValidation) => {
                    if (
                        validationData.status == "valid" &&
                        validationData.mx_found == "true" &&
                        (
                          validationData.sub_status == "alias_address" ||
                          validationData.sub_status == ""
                        )
                    ) {
                        return null
                    } else {
                        return { isEmailInvalid : true }
                    }
                },
                error: (validationFailed) => {
                    console.log(
                        "Failed to validate the Email Address",
                        validationFailed
                    );
                },
            });
        });

        return (
            control: AbstractControl
        ):
        | Promise<ValidationErrors | null>
        | Observable<ValidationErrors | null> => {
            debouncedSubject$.next(control.value);
            let promise = new Promise<any>((resolve, reject) => {
              validatorSubject$.subscribe((result) => resolve(result));
            });
            return promise;
        };
    }
}

Component TS -

this.registration = this._formBuilder.group({
  firstName: new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-z A-Z]+$')
  ]),
  lastName: new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-z A-Z]+$')
  ]),
  email: new FormControl('', [
    Validators.required,
    Validators.pattern('[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}')
  ],UniqueEmailValidator.createValidator(this._ajaxService))
})

Component HTML -

<div *ngIf="formcontrol.email.errors.isEmailInvalid">
   <p>Use a working E-mail address.</p>
</div>

Answer 4

This is the solution I came up with to address my issue -

Validator -

export class UniqueEmailValidator {
    static createValidator(_ajaxService: AjaxService) {
        let validatorSubject$ = new Subject();
        let debouncedSubject$ = new Subject<string>();

        debouncedSubject$
        .pipe(debounceTime(500), distinctUntilChanged())
        .subscribe((email: string) => {
            const apiKey = environment.emailValidatationKey;
            const baseUrl = 'https://api.zerobounce.net/v2/validate?';
            _ajaxService.apiCall('', `${baseUrl}api_key=${apiKey}&email=${email}&ip_address=''`, 'GET', true).subscribe({
                next: (validationData : IEmailValidation) => {
                    if (
                        validationData.status == "valid" &&
                        validationData.mx_found == "true" &&
                        (
                          validationData.sub_status == "alias_address" ||
                          validationData.sub_status == ""
                        )
                    ) {
                        return null
                    } else {
                        return { isEmailInvalid : true }
                    }
                },
                error: (validationFailed) => {
                    console.log(
                        "Failed to validate the Email Address",
                        validationFailed
                    );
                },
            });
        });

        return (
            control: AbstractControl
        ):
        | Promise<ValidationErrors | null>
        | Observable<ValidationErrors | null> => {
            debouncedSubject$.next(control.value);
            let promise = new Promise<any>((resolve, reject) => {
              validatorSubject$.subscribe((result) => resolve(result));
            });
            return promise;
        };
    }
}

Component TS -

this.registration = this._formBuilder.group({
  firstName: new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-z A-Z]+$')
  ]),
  lastName: new FormControl('', [
    Validators.required,
    Validators.pattern('^[a-z A-Z]+$')
  ]),
  email: new FormControl('', [
    Validators.required,
    Validators.pattern('[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}')
  ],UniqueEmailValidator.createValidator(this._ajaxService))
})

Component HTML -

<div *ngIf="formcontrol.email.errors.isEmailInvalid">
   <p>Use a working E-mail address.</p>
</div>

Utilizing a custom asynchronous validator in Angular 8 that returns a Promise or Observable for validation purposes

Answer №1

Answer №2

Similar questions

Tips for transforming promise function into rxjs Observables in Angular 10

Make sure to not update until all the necessary checks have been completed successfully

What are the most effective strategies for managing vast amounts of data using JS fetch?

Troubleshooting: React is not defined in Rollup + React 17 with updated JSX Transform

Turn off Affix feature for mobile phones

Stubbing out a module's function with Sinon

Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

Experiment with parsing multiple outputs instead of repeatedly coding them as constants in Node.js

The text entered in the textbox vanishes after I press the submit button

How can I display a "loading..." message as a temporary placeholder while waiting for my Apexcharts to load?

How to use TypeScript to filter an array based on the values of another array

Exploring different pages in Angular2 and Ionic2

Merge text inputs to preview content prior to form submission

Incorporating two components and nesting one within the other, similar to the way angular-material seamlessly integrates its components

The function of the Angular ng-include form action for posting a URL appears to be malfunctioning

Why is my Angular router displaying the page twice in the browser window?

axios replicates the URL within the interceptor

Getting rid of the scrollbar in Internet Explorer

How can one change the color of movable tiles to red while keeping the rest of the tiles in their original state in a puzzle game?

Error in AWS Lambda: Module 'index' not found