Angular2 control validation when a user finishes typing

Question

I would like to perform validation with tthe server to check if an email is already registered but only on blur not on value change

I have an option to add multiple controls and this is how ive organized my form

    ngOninit(){
      this.userForm = this._formBuilder.group({
       others: this._formBuilder.array([])  //multiple
      });

      this.onAddControl();  //allows adding multiple items
    }



    onAddControl(){

        return this._formBuilder.group({
         email: ['' [this._validateServ.emailDoesntExistsValidator.bind(this._validateServ)]
         ],

       });
   }
 }

Now on the _validateServ

emailDoesntExistsValidator(control) {
  if (control.value != undefined) {
    if(!this.emailValueValidator(control)){
       return this._authService.checkExists("email",control.value)  //http request
        .map(response => {
          if (response) {
            return {'emailTaken': true};
         }
      });
    }

  }
}

I would like the email validation to run on blur since it is performing a http request so that i can show the waiting as http request is being performed The above works but works on each keypress but not on blur event

Community · Accepted Answer · 2017-05-23 12:09:51Z

1

I don't know that you can delay control validation.

But there are two things you could delay:

The HTTP request. The debounceTime() operator lets you wait for n milliseconds after the user has finished typing to execute the request. See this example.
The displaying of the error. Even though the validity of the field is calculated as the user types, you can still wait for blur to show the error. Set a flag to true when the field blurs: <input (blur)="displayError=true">. Then use that flag to display the error: <div *ngIf="error && displayError">Error message</div>.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 4, 2017 at 17:30

AngularChef

14.1k9 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 control validation when a user finishes typing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related