Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Mark P
175
IgxInputGroup styling with custom validator
posted

Hi,

I am having an issue when combining built-in and custom validators using an IgxInputGroup in a template-driven form.

The following sample demonstrates the issue.

https://stackblitz.com/edit/angular-fnwes4?file=src/app/input-group/template-driven-form-validation/template-driven-form-validation.component.html

There are two username inputs username1 and username2 to demonstrate the different behaviours.

Username1 has a custom validator that fails validation if the username contains "a". When typing a name containing "a" into this input the  input and label are immediately coloured red and the validation message appears below the input.

Username2 has the same custom validator and also the built-in required validator. When typing a name containing "a" into this input the input and label are immediately coloured green and the validation message appears below the input. As soon as the input loses focus the colour changes to red.

So far I've not been able to find a way to combine built-in and custom validators without getting this temporary green colour for invalid input.

Have I missed something I need to make this work and for the red formatting to be applied immediately for invalid input?

Thanks.

  • 700
    Offline posted

    Hello Mark,

    Thank you for posting in our community!

    I have been looking into your question and after an investigation I have determined that the described behavior is reproducible when using template-driven forms, however, it is not reproducible when using reactive forms. Having this in mind, what I would suggest is logging this behavior in our GitHub repository here.

    This will give you the opportunity to directly communicate with our development team regarding this matter and get notifications whenever new information is available.

    In the meantime, in case you want to continue using template-driven forms, an approach I could suggest is modifying the custom validator to fulfill the role of the built-in required validator as well and display different error messages, depending on the generated errors.

    Here could be found a small sample demonstrating my suggestion. Please test it on your side and let me know how it behaves.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Associate Software Developer