CODEWITHSUNDEEP
validationangularangular2-forms
aherrick
aherrick

Reputation: 20161

Angular2 Async Form Validator (return Promise)

I'm trying to update the Angular2 Forms Validation example to handle an Async Validation response. This way I can hit an HTTP endpoint to validate a username.

Looking at their code they currently aren't currently using a Promise and it's working just fine:

/** A hero's name can't match the given regular expression */

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const name = control.value;
    const no = nameRe.test(name);
    return no ? {'forbiddenName': {name}} : null;
  };
}

I'm trying to update to return a Promise. Something like:

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl) => {
    const name = control.value;


    return new Promise( resolve => {
               resolve({'forbiddenName': {name}});
        });

  };
}

However, the result I get doesn't display the error message, it's showing undefined.

enter image description here

My thought is it has something to do with the way they are handling displaying the errors:

  onValueChanged(data?: any) {
    if (!this.heroForm) { return; }
    const form = this.heroForm;

    for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

However I'm not sure of a better way of doing this.

Angular2 example: https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#live-example

Link to my example attempting to return Promise: https://plnkr.co/edit/sDs9pNQ1Bs2knp6tasgI?p=preview

Upvotes: 0

Views: 1499

Answers (1)

Simon Z.
Simon Z.

Reputation: 497

The problem is that you add the AsyncValidator to the SyncValidator Array. AsyncValidators are added in a separate array after the SyncValidators: 

this.heroForm = this.fb.group({
  'name': [this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      Validators.maxLength(24)
    ], 
    [forbiddenNameValidator(/bob/i)] // << separate array
  ],
  'alterEgo': [this.hero.alterEgo],
  'power':    [this.hero.power, Validators.required]
});

Upvotes: 3

Related Questions