Geek Answers Handbook

Angular 2 Set focus on the first form field to the component load

In my application, I want to automatically set the focus on the first field of the form to load the component. Can anyone explain how to achieve this without repetition, since I want this in every form (reactive form) in my application.

+6
source share
5 answers

You must use the directive to achieve this behavior.

This will show you how to do it: https://plnkr.co/edit/ttxCP7vCLkLtNb3Xiaah?p=preview

import {Component, NgModule, Directive, ElementRef, Renderer} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Directive({ selector: 'form[anyNameHere]' }) export class SelectFirstInputDirective { constructor(private _eRef: ElementRef, private _renderer : Renderer) { } private _getInputElement(nativeElement: any): any { if (!nativeElement || !nativeElement.children) return undefined; if (!nativeElement.children.length && nativeElement.localName === 'input' && !nativeElement.hidden) return nativeElement; let input; [].slice.call(nativeElement.children).every(c => { input = this._getInputElement(c); if (input) return false; // break return true; // continue! }); return input; } ngAfterViewInit() { let formChildren = [].slice.call(this._eRef.nativeElement.children); formChildren.every(child => { let input = this._getInputElement(child); if (input) { this._renderer.invokeElementMethod(input, 'focus', []); return false; // break! } return true; // continue! }); } } @Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <form anyNameHere> <div class="form-group"> <input hidden formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName"> <label class="col-sm-3 control-label" for="firstName">Name</label> <div class="col-sm-9 form-inline"> <div class="form-group"> <div class="col-sm-12"> <input formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input formcontrolname="lastName" type="text" class="form-control input-sm ng-untouched ng-pristine ng-valid" placeholder="Last Name" id="lastName"> </div> </div> </div> </div> </form> </div> `, }) export class App { constructor() { this.name = 'Angular2' } } @NgModule({ imports: [ BrowserModule ], declarations: [ App, SelectFirstInputDirective ], bootstrap: [ App ] }) export class AppModule {}
+3
source

With Angular 4, Renderer is deprecated, so the directory path has disappeared. But in any case, you can always use the “quick and dirty” way: add a link to the element on which you want to set focus, and just use <reference-name>.focus()

 <form [formGroup]="form" (ngSubmit)="onSubmit(form, $event); needFocus.focus()"> <input placeholder="" formControlName="name" #needFocus> </form>
+2
source

you can achieve this by simply adding an “autofocus” attribute to your input element, for example.

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

HTML autofocus attribute does just that

<input type="text" name="fname" autofocus>

0
source

Following the approach, you can use => 1. You can do this using the autoFoucs directive OR 2. Provide a link to your control, for example

  <input hidden #firstName formcontrolname="firstName" type="text" class="form-control input-sm ng-pristine ng-valid ng-touched" placeholder="First Name" id="firstName">

Then in the ts file declare it as

 export class App implements OnInit{ @ViewChild('firstName') firstNameTextbox; constructor() { } ngOnInit() { this.firstNameTextbox.nativeElement.focus(); } }
-one
source

More articles:


All Articles