Angular 2 Set focus on first field of form on component load

angular angular2-template angular2-directives angular2-forms
Naveed Ahmed picture Naveed Ahmed · Sep 20, 2016 · Viewed 18.1k times · Source

In my app I want to automatically set focus on first field of form on component load. Can anyone please guide how to achieve this without any repetition as I want this on every form (Reactive Forms) in my app.

Answer

Rajiv picture Rajiv · Sep 7, 2017

you can achieve this by simply adding the "autofocus" attribute to your input element like.

<input class="form-control" [formControl]="name" autofocus>

Related questions

How to display error message based on custom validation rules in Angular 2?

I am using a template-driven approach to building forms in Angular 2 and I have successfully created custom validators that I can use in the template. However, I can't find a way to display specific error message bound to specific errors. …

Read More
Angular 2 Scroll to top on Route Change

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me the next page but it doesn't scroll to the top of the …

Read More
Implementing autocomplete

I am having trouble finding a good autocomplete component for Angular2. Just anything that I can pass a list of key-label objects to and have a nice autocomplete on an input field. Kendo does not support Angular 2 yet and that …

Read More