Angular2 Triggering a custom validator

Question

I have done a custom validator which I apply on one of my two input:

<input type="text"
     class="validate"
     [(ngModel)]="foo"
     name="foo"
     ngControl="foo"
     customValidator                                   
     [validatorArg]="blah"
/>

<input type="text"
     class="validate"
     [(ngModel)]="blah"
     name="blah"
/>

The customValidatordepends on the second input. So what I'd like here, would be to trigger the validator on the foo input when I do modified the blah input. Any idea how to do that ? I could do it on ngModelChange

EDIT: My inputs are part of a form which is a FormGroup

Ján Halaša · Accepted Answer · 2017-04-03 08:55:07Z

7

It's a bit problematic with template driven forms. I have done it like this

<input name="blah" ... (ngModelChange)="triggerValidation(formObject.controls.foo)">

triggerValidation(control: AbstractControl) {
    control.markAsTouched();
    setTimeout(() => control.updateValueAndValidity(), 0);
}

If you run updateValueAndValidity() synchronously (without timeout), it may use an old value of the "blah" input.

answered Apr 3, 2017 at 8:55

Ján Halaša

8,4961 gold badge40 silver badges37 bronze badges

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

2 Comments

andreisrob Over a year ago

Awesome. For the life of me, I could not figure out why my updateValueAndValidity was using an old value. My problem is trying to run a custom validator in a child control when a parent control changes. Sometimes template driven forms are so difficult... In a Reactive form, I could run my validator whenever I want and not have to rely on Angular's rules. Thanks for the solution

Andreiasw Over a year ago

I am using a custom validator which I am triggering on submit for just one filed of the form. I am setting a boolean value to false if a query has returned with an error and I am trying to use this boolean to invalidate the field if it is false. However it appears that calling updateValueAndValidity does trigger the validator but sees the old value of the boolean. t this.isValid = err.error.reqState; // set to false control.markAsTouched({ onlySelf: true }); control.updateValueAndValidity() // here its true

Collectives™ on Stack Overflow

Angular2 Triggering a custom validator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related