Angular 4: reactive form control is stuck in pending state with a custom async validator

Question

I am building an Angular 4 app that requires the BriteVerify email validation on form fields in several components. I am trying to implement this validation as a custom async validator that I can use with reactive forms. Currently, I can get the API response, but the control status is stuck in pending state. I get no errors so I am a bit confused. Please tell me what I am doing wrong. Here is my code.

Component

import { Component, 
         OnInit } from '@angular/core';
import { FormBuilder, 
         FormGroup, 
         FormControl, 
         Validators } from '@angular/forms';
import { Router } from '@angular/router';

import { EmailValidationService } from '../services/email-validation.service';

import { CustomValidators } from '../utilities/custom-validators/custom-validators';

@Component({
    templateUrl: './email-form.component.html',
    styleUrls: ['./email-form.component.sass']
})

export class EmailFormComponent implements OnInit {

    public emailForm: FormGroup;
    public formSubmitted: Boolean;
    public emailSent: Boolean;
    
    constructor(
        private router: Router,
        private builder: FormBuilder,
        private service: EmailValidationService
    ) { }

    ngOnInit() {

        this.formSubmitted = false;
        this.emailForm = this.builder.group({
            email: [ '', [ Validators.required ], [ CustomValidators.briteVerifyValidator(this.service) ] ]
        });
    }

    get email() {
        return this.emailForm.get('email');
    }

    // rest of logic
}

Validator class

import { AbstractControl } from '@angular/forms';

import { EmailValidationService } from '../../services/email-validation.service';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

export class CustomValidators {

    static briteVerifyValidator(service: EmailValidationService) {
        return (control: AbstractControl) => {
            if (!control.valueChanges) {
                return Observable.of(null);
            } else {
                return control.valueChanges
                    .debounceTime(1000)
                    .distinctUntilChanged()
                    .switchMap(value => service.validateEmail(value))
                    .map(data => {
                        return data.status === 'invalid' ? { invalid: true } : null;
                    });
            }
        }
    }
}

Service

import { Injectable } from '@angular/core';
import { HttpClient,
         HttpParams } from '@angular/common/http';

interface EmailValidationResponse {
    address: string,
    account: string,
    domain: string,
    status: string,
    connected: string,
    disposable: boolean,
    role_address: boolean,
    error_code?: string,
    error?: string,
    duration: number
}

@Injectable()
export class EmailValidationService {

    public emailValidationUrl = 'https://briteverifyendpoint.com';

    constructor(
        private http: HttpClient
    ) { }

    validateEmail(value) {
        let params = new HttpParams();
        params = params.append('address', value);
        return this.http.get<EmailValidationResponse>(this.emailValidationUrl, {
            params: params
        });
    }
}

Template (just form)

<form class="email-form" [formGroup]="emailForm" (ngSubmit)="sendEmail()">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <fieldset class="form-group required" [ngClass]="{ 'has-error': email.invalid && formSubmitted }">
                <div>{{ email.status }}</div>
                <label class="control-label" for="email">Email</label>
                <input class="form-control input-lg" name="email" id="email" formControlName="email">
                <ng-container *ngIf="email.invalid && formSubmitted">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;Please enter valid email address.
                </ng-container>
            </fieldset>
            <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
        </div>
    </div>
</form>

Try to subscribe to the statusChanges event of your form and see if it is always in the pending status or after sometime it changes it status to VALID or INVALID or whatever. — Fiyaz Hasan, Feb 07 '18 at 06:43
The only reason I can think of why this is happening is because I am using `switchcMap()` operator. I know it replaces the current observable with a new one. I have tried to subscribe to the output of the `switchMap()` and return a new observable from within the subscribe statement, but that did not work. It fails with type error saying it expected the validator function to return observable or promise. — Andre Kuzmicheff, Feb 07 '18 at 16:04

score 41 · Accepted Answer · edited Jun 20 '20 at 09:12

41

There's a gotcha!

That is, your observable never completes...

This is happening because the observable never completes, so Angular does not know when to change the form status. So remember your observable must to complete.

You can accomplish this in many ways, for example, you can call the first() method, or if you are creating your own observable, you can call the complete method on the observer.

So you can use first()

UPDATE TO RXJS 6:

briteVerifyValidator(service: Service) {
  return (control: AbstractControl) => {
    if (!control.valueChanges) {
      return of(null);
    } else {
      return control.valueChanges.pipe(
        debounceTime(1000),
        distinctUntilChanged(),
        switchMap(value => service.getData(value)),
        map(data => {
          return data.status === 'invalid' ? { invalid: true } : null;
        })
      ).pipe(first())
    }
  }
}

A slightly modified validator, i.e always returns error: STACKBLITZ

OLD:

.map(data => {
   return data.status === 'invalid' ? { invalid: true } : null;
})
.first();

A slightly modified validator, i.e always returns error: STACKBLITZ

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 07 '18 at 18:53

AT82

71,416
24
140
167

2

Great, very glad to hear! :) :) – AT82 Feb 07 '18 at 19:24
7

wish I would have found this before wasting 6hrs. – user2060431 Aug 27 '19 at 23:00
2

first() is not working anymore. Now using pipe, but I got the exact same problem as mentioned here and cant find a fix.. – xDrago Jun 20 '20 at 01:48
2

@xDrago, please recheck my answer, I updated answer for rxjs 6 :) – AT82 Jun 20 '20 at 06:31
Hello, one thing. I'm doing something similar. However, when It enters by the first if condition, my form always returns pending. What should I do? @AJT82 – Alba Oct 23 '20 at 10:29
My issue with first() not working was because the validator never fired. Adding a startWith(undefined) caused the validator to fire. – Craig Shearer Mar 03 '23 at 22:43

score 2 · Answer 2 · answered Jan 21 '20 at 07:35

So what I did was to throw a 404 when the username was not taken and use the subscribe error path to resolve for null, and when I did get a response I resolved with an error. Another way would be to return a data property either filled width the username or empty through the response object and use that insead of the 404

Ex.

In this example I bind (this) to be able to use my service inside the validator function

An extract of my component class ngOnInit()

//signup.component.ts

constructor(
 private authService: AuthServic //this will be included with bind(this)
) {

ngOnInit() {

 this.user = new FormGroup(
   {
    email: new FormControl("", Validators.required),
    username: new FormControl(
      "",
      Validators.required,
      CustomUserValidators.usernameUniqueValidator.bind(this) //the whole class
    ),
    password: new FormControl("", Validators.required),
   },
   { updateOn: "blur" });
}

An extract from my validator class

//user.validator.ts
...

static async usernameUniqueValidator(
   control: FormControl
): Promise<ValidationErrors | null> {

 let controlBind = this as any;
 let authService = controlBind.authService as AuthService;  
 //I just added types to be able to get my functions as I type 

 return new Promise(resolve => {
  if (control.value == "") {
    resolve(null);
  } else {
    authService.checkUsername(control.value).subscribe(
      () => {
        resolve({
          usernameExists: {
            valid: false
          }
        });
      },
      () => {
        resolve(null);
      }
    );
  }
});

...

Thanks for this, seems like I needed the resolve in my case. — Nathanael Mayne, Feb 23 '21 at 04:36

score 1 · Answer 3 · answered Apr 17 '18 at 14:47

1

I've been doing it slightly differently and faced the same issue.

Here is my code and the fix in case if someone would need it:

  forbiddenNames(control: FormControl): Promise<any> | Observable<any> {
    const promise = new Promise<any>((resolve, reject) => {
      setTimeout(() => {
        if (control.value.toUpperCase() === 'TEST') {
          resolve({'nameIsForbidden': true});
        } else {

          return null;//HERE YOU SHOULD RETURN resolve(null) instead of just null
        }
      }, 1);
    });
    return promise;
  }

answered Apr 17 '18 at 14:47

alexlz

618
1
10
24

1

To be honest with you, I did think of using _setTimeout()_ in my custom validator function, but considered it to be a hack (and not a good one) since we never know how long it takes an asynchronous http call to return the data. Also, you used _setTimeout()_ on what appears to be a synchronous validator. I don't know what exact logic you had to implement, but I guess it worked for you. :) – Andre Kuzmicheff Apr 24 '18 at 14:57
@AndreKuzmicheff I made that code only for testing, the purpose of the validator exists only in a context of this particular problem – alexlz Apr 24 '18 at 15:02
1

I see. In this case, I'd still avoid using _setTimeout()_ for a custom async validator that uses an http service due to varying server response times. – Andre Kuzmicheff Apr 24 '18 at 15:06
Hi @alexlz Thanks for posting this, can you do same with observable? – Always_a_learner Mar 28 '19 at 09:56
1

@Harsimer I guess so, I think you just need to create an observable object instead of a Promise and call next() instead of resolve(); – alexlz Mar 28 '19 at 10:36

score 0 · Answer 4 · answered Sep 26 '22 at 11:11

I tries using the .first(). technique described by @AT82 but I didn't find it solved the problem.

What I eventually discovered was that the form status was changing but it because I'm using onPush, the status change wasn't triggering change detection so nothing was updating in the page.

The solution I ended up going with was:

export class EmailFormComponent implements OnInit {
    ...
    constructor(
        ...
        private changeDetector: ChangeDetectorRef,
    ) {

      ...

      // Subscribe to status changes on the form
      // and use the statusChange to trigger changeDetection
      this.myForm.statusChanges.pipe(
        distinctUntilChanged()
      ).subscribe(() => this.changeDetector.markForCheck())
    }

}

score 0 · Answer 5 · answered Jan 14 '23 at 03:06

import { Component, 
         OnInit } from '@angular/core';
import { FormBuilder, 
         FormGroup, 
         FormControl, 
         Validators } from '@angular/forms';
import { Router } from '@angular/router';

import { EmailValidationService } from '../services/email-validation.service';

import { CustomValidators } from '../utilities/custom-validators/custom-validators';

@Component({
    templateUrl: './email-form.component.html',
    styleUrls: ['./email-form.component.sass']
})

export class EmailFormComponent implements OnInit {

    public emailForm: FormGroup;
    public formSubmitted: Boolean;
    public emailSent: Boolean;
    
    constructor(
        private router: Router,
        private builder: FormBuilder,
        private service: EmailValidationService
    ) { }

    ngOnInit() {

        this.formSubmitted = false;
        this.emailForm = this.builder.group({
            email: [ '', [ Validators.required ], [ CustomValidators.briteVerifyValidator(this.service) ] ]
        });
    }

    get email() {
        return this.emailForm.get('email');
    }

    // rest of logic
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — 3ddavies, Jan 15 '23 at 05:40

Angular 4: reactive form control is stuck in pending state with a custom async validator

Component

Validator class

Service

Template (just form)

5 Answers5

Linked