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
IgxInput / IgxInputGroup Validate Programatically on click


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?

No Data
  • 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.

No Data