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
Shahab Ashraf
370
IgxInput / IgxInputGroup Validate Programatically on click
posted

Hi,

We are using IgxInputGroup Component. The component is not validated unless the field is focused.

How we can validate(mark fields red) a IgxInput / IgxInputGroup before they are focused on some button click event?

  • 80
    Offline posted

    Hi Shahab,

    Thank you for reaching out!

    You can validate an input on another event (i.e. a button click) by:

    1. Get a reference to the input element w/ the IgxInputDirective

    @ViewChild(IgxInputDirective, { read: IgxInputDirective, static: true })
public igxInput: IgxInputDirective;


    2. Check the input's validity
    const valid = this.igxInput.nativeElement.checkValidity();


    3. Set the validity of the IgxInputDirective to the appropriate IgxInputState (which will apply the proper border)
    this.igxInput.valid =  valid ? IgxInputState.VALID : IgxInputState.INVALID;


    You can see this in action in this StackBlitz example.