Angular 2 Focus on first invalid input after Click/Event

Question

I have an odd requirement and was hoping for some help.

I need to focus on the first found invalid input of a form after clicking a button (not submit). The form is rath

Answer 1

If you are using AngularMaterial, the MdInputDirective has a focus() method which allow you to directly focus on the input field.

In your component, just get a reference to all the inputs with the @ViewChildren annotation, like this:

@ViewChildren(MdInputDirective) inputs: QueryList;

Then, setting focus on the first invalid input is as simple as this:

this.inputs.find(input => !input._ngControl.valid).focus()