Angular Reactive forms don't wait for custom async validators

Question

I have a login component in my angular-CLI app. I have fields email and password. I created two custom validations => one for checking if the user exists, and other for checking if the password matches the user. I checked the working of built-in validators like a required field and valid email. They work fine. The problem is that my custom validators show errors only after the submission is called. The reactive form is not waiting for the custom async validators to resolve.

This is my code:

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {AuthService} from '../auth.service';
import {noUser, pwdMisMatch} from '../validators';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  form: FormGroup;
  submitted = false;
  returnUrl: string;

  constructor(private formBuilder: FormBuilder, public authService: AuthService) {
    this.form = this.formBuilder.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['', Validators.required],
      },
      {
        validators: [noUser(authService, 'email'), pwdMisMatch(authService, 'email', 'password')]
        , updateOn: 'blur'
      }
    );
  }

  ngOnInit() {
    this.returnUrl = '/dashboard';
    this.authService.logout();
  }

  get f() {
    return this.form.controls;
  }

  onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.form.invalid) {
      return;
    } else {
      alert('Success');
    }
  }

}

This is my custom validators file:

import {FormGroup} from '@angular/forms';
import {AuthResponse, AuthService} from './auth.service';

export function MustMatch(controlName: string, matchingControlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];
    const matchingControl = formGroup.controls[matchingControlName];

    if (matchingControl.errors && !matchingControl.errors.mustMatch) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    if (control.value !== matchingControl.value) {
      matchingControl.setErrors({ mustMatch: true });
    } else {
      matchingControl.setErrors(null);
    }
  };
}

export function userExist(authservice: AuthService, controlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];

    if (control.errors && !control.errors.CheckUser) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    authservice.checkUser(control.value).subscribe((res: AuthResponse) => {
      if (res.ok) {
        control.setErrors({ userExist: true });
      } else {
        control.setErrors(null);
      }
    });
  };
}

export function noUser(authService: AuthService, controlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];

    if (control.errors && !control.errors.noUser) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    authService.checkUser(control.value).subscribe((res: AuthResponse) => {
      if (!res.ok) {
        control.setErrors({ noUser: true });
      } else {
        control.setErrors(null);
      }
    });
  };
}

export function pwdMisMatch(authService: AuthService, controlName: string, secureControlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];
    const secureControl = formGroup.controls[secureControlName];

    if (control.errors || secureControl.errors && !secureControl.errors.pwdMisMatch) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    authService.verifyPassword(control.value, secureControl.value).subscribe((res: AuthResponse) => {
      if (!res.ok) {
        secureControl.setErrors({ pwdMisMatch: true });
      } else {
        control.setErrors(null);
      }
    });
  };
}

I tried this answer and the problem is not solved. Please help.

Update: my angular repo

You mean before submitting the form the on submit get called? — Chellappan வ, Jan 02 '20 at 13:08
no no, the value of "this.form.invalid" fails and the success message is displayed before the custom form validation is resolved. — Sivaramakrishnan, Jan 02 '20 at 13:14
I need to make the form to be invalid until the custom validations are complete. I don't think setting the value manually is a good way. — Sivaramakrishnan, Jan 02 '20 at 13:16
Is there any way to make the reactive form to wait for custom validation to resolve. that execute submit function only if the form validations are complete — Sivaramakrishnan, Jan 02 '20 at 13:17

score 1 · Answer 1 · edited Jan 02 '20 at 13:35

1

Maybe you should identify as an async validators, like that :

constructor(private formBuilder: FormBuilder, public authService: AuthService) {
    this.form = this.formBuilder.group(
        {
            email: ['', [Validators.required, Validators.email]],
            password: ['', Validators.required],
        },
        {
            asyncValidators: [noUser(authService, 'email'), pwdMisMatch(authService, 'email', 'password')]
            , updateOn: 'blur'
        }
    );
}

edited Jan 02 '20 at 13:35

Tushar Walzade

3,737
4
33
56

answered Jan 02 '20 at 12:57

Virgi

11
3

I tried your answer, I gave a valid email for which the error " no user found" is displayed. but the form submission code is also running. – Sivaramakrishnan Jan 02 '20 at 13:06
the form didn't wait for the validation to complete – Sivaramakrishnan Jan 02 '20 at 13:06
I added my angular repo for you – Sivaramakrishnan Jan 02 '20 at 15:31

Chellappan வ · Answer 2 · 2020-01-02T14:48:28.117

1

Angular customValidator function should return error or null in order to work.

FormGroup has pending status you can use that to check whether the async validator has completed or not.

Try this:

export function noUser(authService: AuthService, controlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];

    if (control.errors && !control.errors.noUser) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    authService.checkUser(control.value).subscribe((res: AuthResponse) => {
      if (!res.ok) {
        return { noUser: true };
      } else {
        return null;
      }
    });
  };
}

export function pwdMisMatch(authService: AuthService, controlName: string, secureControlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];
    const secureControl = formGroup.controls[secureControlName];

    if (control.errors || secureControl.errors && !secureControl.errors.pwdMisMatch) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    authService.verifyPassword(control.value, secureControl.value).subscribe((res: AuthResponse) => {
      if (!res.ok) {
        rerurn { pwdMisMatch: true };
      } else {
        return null;
      }
    });
  };
}

 onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.form.pending && this.form.invalid) {
          return;
        } else {
          alert('Success');
        }
      }

edited Jan 02 '20 at 14:48

answered Jan 02 '20 at 13:35

Chellappan வ

23,645
3
29
60

This didn't do any change. The form behaves as before – Sivaramakrishnan Jan 02 '20 at 14:20
I tried your answer, and the error keeps happening. with which I found that the success message is displayed before the form validation is triggered! – Sivaramakrishnan Jan 02 '20 at 15:21
I added my angular repo for you – Sivaramakrishnan Jan 02 '20 at 15:31
I don't get any error but the reactive form executes the submission code despite validation fails. – Sivaramakrishnan Jan 02 '20 at 15:33
you mean invalid false? – Chellappan வ Jan 02 '20 at 15:36
If you console inside subscribe method is it get printed in console? – Chellappan வ Jan 02 '20 at 15:40
Its the reactive form's bug – Sivaramakrishnan Jan 02 '20 at 18:00
or something I am missing – Sivaramakrishnan Jan 02 '20 at 18:01
what to do for backend? – Sivaramakrishnan Jan 03 '20 at 05:32

Dmitry Sobolevsky · Answer 3 · 2020-01-02T13:39:01.540

0

The issue that your async validations functions are not return Promise or Observable

From angular documentation:

Async validators: functions that take a control instance and return a Promise or Observable that later emits a set of validation errors or null. You can pass these in as the third argument when you instantiate a FormControl

Dont use Subscribe here:

authservice.checkUser(control.value).subscribe()

use pipe() transformation instead:

authservice.checkUser(control.value). pipe(map(res => res && res.ok ? ({ userExist: true }) : null ))

edited Jan 02 '20 at 13:39

answered Jan 02 '20 at 13:31

Dmitry Sobolevsky

1,171
6
12

I tried your answer. it didn't work. also, it fails to add errors like " userExist: true ". The error is not even showing in the form. – Sivaramakrishnan Jan 02 '20 at 14:20
What do you mean 'not showing'? Have you try to debug with ng.probe($0).componentInstance in console? – Dmitry Sobolevsky Jan 02 '20 at 14:29
checkUser(email: any) { const url = 'http://localhost:3000/api/auth/user'; const headers: HttpHeaders = new HttpHeaders({ 'Content-Type': 'application/json' }); const body: any = JSON.parse(JSON.stringify({ email })); const options = { headers }; return this.http.post(url, body, options) .pipe( map(data => new AuthResponse(data)) ); } – Sivaramakrishnan Jan 02 '20 at 14:45
should I pipe again? – Sivaramakrishnan Jan 02 '20 at 14:45
It's okey. Are you sure that you dont have exception on Json.parse and stringify? – Dmitry Sobolevsky Jan 02 '20 at 15:07
I added my angular repo for you – Sivaramakrishnan Jan 02 '20 at 15:31

Angular Reactive forms don't wait for custom async validators

3 Answers3