Perform validation for a form field in Angular 2 asynchronously by making an HTTP request

Question

Perform validation for a form field in Angular 2 asynchronously by making an HTTP request

I have a concept where the user can submit a form and if the email is already registered, an error triggered by the API should display. I am using reactive forms with FormBuilder and trying to implement the validator in the subscribe error handler.

Constructor :

this.email = fb.control('', [Validators.required, Validators.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/), SignupComponent.alreadyExist()]);
this.username = fb.control('', [Validators.required, Validators.pattern(/^([A-ZÀ-ÿa-z0-9]{2,})+(?:[ _-][A-ZÀ-ÿa-z0-9]+)*$/)]);

this.userRegisterForm = fb.group({
    email: this.email,
    username: this.username
});

Custom alreadyExist() validator :

static alreadyExist(alreadyExist: boolean = false): any {

    return (control: FormControl): { [s: string]: boolean } => {

        if(alreadyExist) {
            return { emailAlreadyExist: true }
        }
    }
}

onSubmit() :

this.user.create(newUser)
    .subscribe(
        data => {
            this.router.navigate(['signin']);
        },
        error => {
            if(error.status === 401) {

                // ATTEMPTING TO USE THE VALIDATOR HERE BY SETTING : FALSE
                SignupComponent.alreadyExist(true);
            }

            this.loading = false;
        });

Although it seems like the validator is being called, the anonymous method inside it is not activated. Is this not a recommended approach? Any suggestions would be greatly appreciated. Thank you.

angular typescript formbuilder customvalidator

Answer 1

Answer №1

After some research, I managed to find a solution.

In my specific scenario, when dealing with the email FormControl, I realized that I don't actually require a custom validator (despite the fact that it can be implemented using setValidators()).

I decided to remove alreadyExist() and eliminate its declaration from the list of validators.

Instead, I opted to utilize the setErrors() method provided by the FormControl :

onSubmit() :

this.user.create(newUser)
    .subscribe(
        data => {
            this.router.navigate(['signin']);
        },
        error => {
            if(error.status === 401) {

                // TRIGGER THE VALIDATOR HERE TO SET : FALSE
                this.userRegisterForm.controls['email'].setErrors({
                  "emailAlreadyExist": true
                });
            }

            this.loading = false;
        });

This approach adds a new error to the email FormControl, allowing me to associate an error message to this particular issue.

Answer 2

After some research, I managed to find a solution.

In my specific scenario, when dealing with the email FormControl, I realized that I don't actually require a custom validator (despite the fact that it can be implemented using setValidators()).

I decided to remove alreadyExist() and eliminate its declaration from the list of validators.

Instead, I opted to utilize the setErrors() method provided by the FormControl :

onSubmit() :

this.user.create(newUser)
    .subscribe(
        data => {
            this.router.navigate(['signin']);
        },
        error => {
            if(error.status === 401) {

                // TRIGGER THE VALIDATOR HERE TO SET : FALSE
                this.userRegisterForm.controls['email'].setErrors({
                  "emailAlreadyExist": true
                });
            }

            this.loading = false;
        });

This approach adds a new error to the email FormControl, allowing me to associate an error message to this particular issue.

Answer 3

Answer №2

Hello Kevin! :) Based on what I understand, your current process flow is as follows:

Allow the user to submit the form (for creating a new account).
Manually add an error to the form if there was a failure in creating the new account.

This setup is not efficient because validation is happening at two points: before and after form submission.

What you should do is utilize a custom validator like you did initially. However, since checking for existing usernames or emails might involve an HTTP request, you need to implement an asynchronous validator.

In declaring the form, asynchronous validators should come AFTER synchronous validators:

this.userForm = fb.group({
  // `userExists` is placed third as it's an async validator
  username: ['', Validators.required, userExists],
  password: []
});

Now let's take a look at the code for userExists. Since this is an async validator, it needs to return an observable or a promise:

// This is just a regular function
// but you can also incorporate this code within a class method.
function userExists(control: AbstractControl): Observable<{[key: string]: any}> {
  // The userName that needs testing.
  const userName = control.value;

  // Note: In a real application, replace this observable with an actual HTTP request
  const existingUsernames = ['kevin', 'vince', 'bernard'];
  return Observable.create(observer => {
    // If the username already exists, emit an error
    if (existingUsernames.indexOf(userName) !== -1) {
      observer.next({usernameTaken: true});
    }
    // Username is available, emit null
    else {
      observer.next(null);
    }
    // The observable MUST complete.
    observer.complete();
  });
}

You can experiment with the code on this Plunker: https://plnkr.co/edit/aPtrp9trtmwUJDJHor6G?p=preview — Try entering an existing username ('kevin', 'vince', or 'bernard') and you'll see an error message even BEFORE submitting the form.

If your previous code wasn't functioning properly, it could be due to several reasons:

You used a synchronous validator instead of an asynchronous one.
Your validator function is a factory function (= a function that returns another function). This is necessary only if you need to customize the validator with specific parameters. In your case, you should stick to a regular function (i.e., in alreadyExist(), keep only the code following the return statement).
The approach of setting errors post-form submission was not ideal either.

Answer 4

Hello Kevin! :) Based on what I understand, your current process flow is as follows:

Allow the user to submit the form (for creating a new account).
Manually add an error to the form if there was a failure in creating the new account.

This setup is not efficient because validation is happening at two points: before and after form submission.

What you should do is utilize a custom validator like you did initially. However, since checking for existing usernames or emails might involve an HTTP request, you need to implement an asynchronous validator.

In declaring the form, asynchronous validators should come AFTER synchronous validators:

this.userForm = fb.group({
  // `userExists` is placed third as it's an async validator
  username: ['', Validators.required, userExists],
  password: []
});

Now let's take a look at the code for userExists. Since this is an async validator, it needs to return an observable or a promise:

// This is just a regular function
// but you can also incorporate this code within a class method.
function userExists(control: AbstractControl): Observable<{[key: string]: any}> {
  // The userName that needs testing.
  const userName = control.value;

  // Note: In a real application, replace this observable with an actual HTTP request
  const existingUsernames = ['kevin', 'vince', 'bernard'];
  return Observable.create(observer => {
    // If the username already exists, emit an error
    if (existingUsernames.indexOf(userName) !== -1) {
      observer.next({usernameTaken: true});
    }
    // Username is available, emit null
    else {
      observer.next(null);
    }
    // The observable MUST complete.
    observer.complete();
  });
}

You can experiment with the code on this Plunker: https://plnkr.co/edit/aPtrp9trtmwUJDJHor6G?p=preview — Try entering an existing username ('kevin', 'vince', or 'bernard') and you'll see an error message even BEFORE submitting the form.

If your previous code wasn't functioning properly, it could be due to several reasons:

You used a synchronous validator instead of an asynchronous one.
Your validator function is a factory function (= a function that returns another function). This is necessary only if you need to customize the validator with specific parameters. In your case, you should stick to a regular function (i.e., in alreadyExist(), keep only the code following the return statement).
The approach of setting errors post-form submission was not ideal either.

Perform validation for a form field in Angular 2 asynchronously by making an HTTP request

Answer №1

Answer №2

Similar questions

Angular 5: Create a dropdown menu with image options

The compatibility between Bootstrap DropDown and collapse features and angular2-meteor seems to be problematic

A guide on how to initiate a click event in Angular 5 using JQuery

What causes the distinction between entities when accessing objects through TestingModule.get() and EntityManager in NestJS?

Tips for effectively utilizing the "getFreeDragPosition" function in Angular 8 CdkDrag

Challenges with Angular and Bootstrap validation

Ways to programmatically include routes with components sourced from a dynamically loaded module

The XMLHttpRequest response states that the preflight request did not meet the access control check requirements

Enhance the validation of multiple fields in Angular through asynchronous AbstractControl in groupForm

Retrieve specific files from a Firestore collection based on a particular field

unable to initiate a new project in angular version 8

Utilize Material-UI in Reactjs to showcase tree data in a table format

What is the significance of `new?()` in TypeScript?

The `Required<Partial<Inner>>` does not inherit from `Inner`

The cross-origin resource sharing configuration has not been implemented

Angular 2 Endgame: HostBinding feature no longer functional

An issue occurred while compiling the 'ToastContainer' template. Decorators do not support function calls, and the call to 'trigger' caused an error

Encountering 404 errors when reloading routes on an Angular Azure static web app

Transform object into data transfer object

Some users are noticing that the style of the Angular Web Application is consistently fading away