Asyn Validation about ng-bootstrap-form-validation

[third774]

Are you using an async validator?

[ONbik-srebollo]

Yes, obviously. If I remove this validator, all works. But this validation breaks form validation.

[kingcody]

@ONbik-srebollo could you post a link to a code base or plunkr that reproduces your issue?

[ONbik-srebollo]

This is the field definition on FormGroup (with another fields):

    this.formGroup = this.formBuilder.group({
      'tin': [null, Validators.compose([Validators.required, tinValidator()]), this.asyncTinValidator.bind(this)],
    });

And this my asyn validator.

  asyncTinValidator(tinCtrl: FormControl): { [key: string]: any } {
    return new Promise (resolve => {
      return this.companyManager.checkTin(tinCtrl.value)
        .then(result => {
          return null;
        }).catch(error => {
          return { 'tin': { value: tinCtrl.value, message: error.error } };
        });
    });
  }

tinValidator is a sync function that only validates format. This works perfectly, and this fails even if I remove all sync validators.

I would like to get a working example with this vendor, because I think this works (I've copied an example from official doc of Angular) but perhaps there is something wrong.

Thanks in advance for your patience.

[kingcody]

@ONbik-srebollo @third774 we need to filter out any control.errors that are null instead of ValidationErrors:

src/lib/Components/form-group-component/form-group-component.ts#87

- this.FormControlNames.filter(c => !c.valid)
+ this.FormControlNames.filter(c => !c.valid && !!c.errors)

This is the outcome with a 2 second async validation timeout:

[third774]

What do y'all think of adding .has-warning to the form group if an async validation is pending?

[ONbik-srebollo]

Hi @third774 .

I think it's not necessary, the validation is fast and it would be confusing to the user.

Thank you @kingcody !!!

[kingcody]

I haven't done a lot of research, but do you know how we would determine if a field is pending an async validation?

[third774]

Checking the status property should do it.

https://angular.io/api/forms/AbstractControl

[ONbik-srebollo]

Be careful...

Now valid property is validated, that is the same as validate status !== valid. The PENDING status would be considered as error like now. I think is better @kingcody option to check if control has errors.

[third774]

We're going to address the pending status in a separate issue.

[ONbik-srebollo]

Hi @third774 and @kingcody

I see that this will be fixed by #26 but it seems to be available on v3.

It's possible to be available on v2.2 ? I need it.

I'm trying to use it adding it to package.json:

"ng-bootstrap-form-validation": "^2.1.0-dev.20180130230430257Z.878bd2d1a9ab7c12256a15e87a9fb32458fd56b1",

But it isn't there. And I can't use dev-master, i don't know why (sorry, i'm a bit newbie).

Can you help me, please?

Thanks in advance.

[kingcody]

@ONbik-srebollo try this:

npm install --save ng-bootstrap-form-validation@2.1.0-dev.20180130230430257Z.878bd2d1a9ab7c12256a15e87a9fb32458fd56b1

or

yarn add ng-bootstrap-form-validation@2.1.0-dev.20180130230430257Z.878bd2d1a9ab7c12256a15e87a9fb32458fd56b1

[ONbik-srebollo]

Thank you so much!!!!

I don't know what happened, but now has installed correctly. Async validation know works perfectly!!!