How to implement Custom Async Validator in Angular4

Question

I'm applying Angular 4 in my project and I am having trouble with Custom Validation using HTTP request.

I also tried this: How to implement Custom Async Validator in Angular2.

But it doesn't work in my project.

Here's what I've done so far:

Validation biding:

    userName: ['', [Validators.required, Validators.minLength(3), this.validateUserName.bind(this)]]

Value changes event:

    let userNameControl = this.individualForm.get('userName');
userNameControl.valueChanges.subscribe(value => {
    this.setErrorMessagesForUserNameControl(userNameControl)
  }
);

Validation function:

validateUserName(control: FormControl): Promise<any> {
let promise = new Promise<any>(
  (resolve, reject) => {
    if (this.oldUserNameForCheck != undefined) {
      this._individualUpdateService.isUserNameExisting(this.oldUserNameForCheck, control.value).subscribe(
        (res) => {
          if (res.isUserNameExisting) {
            console.log("existing");
            resolve({'existing': true});
          } else {
            console.log("NOT existing");
            resolve(null);
          }
        },
        (error) => {
          console.log(error);
        }
      );
    } else {
      resolve(null);
    }
  }
);
return promise;
}

Error Messages

I just try to validate the username by sending it to the back-end.

Here's the logs

As you can see, there's a message for "required", "minlength". Those work fine. But the message for Custom validation is not quite clear.

Vitalii Ivanov · Accepted Answer · 2017-04-12 11:01:52Z

2

Async validator should be in the next parameter

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.validateUserName.bind(this) ] 
]

Also its better to have a factory method with required dependencies that would create validator, instead of using 'bind(this)'

userNameValidator(originalUsername, individualUpdateService) {
    return (control: FormControl): Promise<any> => {
        return new Promise<any>((resolve, reject) => {
            if (originalUsername != undefined) {
                individualUpdateService.isUserNameExisting(originalUsername, control.value).subscribe(
                    (res) => {
                        if (res.isUserNameExisting) {
                            console.log("existing");
                            resolve({ 'existing': true });
                        } else {
                            console.log("NOT existing");
                            resolve(null);
                        }
                    },
                    (error) => {
                        console.log(error);
                    }
                );
            } else {
                resolve(null);
            }
        })
    }
}

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.userNameValidator(this.oldUserNameForCheck, this._individualUpdateService) ] 
]

answered Apr 12, 2017 at 11:01

Vitalii Ivanov

3,2702 gold badges36 silver badges47 bronze badges

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

3 Comments

Howard Ho Over a year ago

Thanks for your help, but it doesn't work. Here's a log printed out on console: dropbox.com/s/19acvswgf1951s9/2017-04-19_160732.jpg?dl=0

Howard Ho Over a year ago

I did this: userName: ['', [Validators.required, Validators.minLength(3)], [this.validateUserName.bind(this)]],

Vino Over a year ago

@HowardHo your simple comment have save my day, I just forget that we can bind this to validation.

Collectives™ on Stack Overflow

How to implement Custom Async Validator in Angular4

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related