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.
Create the Angular app to be used. Create a directive “AutoFocus” that handles the auto-focus of input fields. In this directive set the HTML element as focused. Then import this directive inside app.
HTML form elements already provide for an “autofocus” attribute that will pull focus to an input field after it is rendered on the page. HTML5 autofocus. The problem is when you move the one to another pages using the angular router on single page application.
HTML autofocus attribute do exactly that
<input type="text" name="fname" autofocus>
you can achieve this by simply adding the "autofocus" attribute to your input element like.
<input class="form-control" [formControl]="name" autofocus>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With