Угловой 2 Установите фокус на первое поле формы при загрузке компонента

Question

В моем приложении я хочу автоматически установить фокус на первое поле формы на нагрузке компонента. Может ли кто-нибудь объяснить, как добиться этого без повторения, поскольку я хочу это в каждой форме (реактивные формы) в своем приложении.

Answer 1

Для этого вы должны использовать директиву.

Это покажет вам путь, как это сделать: 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 {} 

Answer 2

с угловой 4, рендер устарел, поэтому директива путь ушла. Но в любом случае вы всегда можете использовать «быстрый и грязный» способ: добавить ссылку на элемент, который вы хотите установить фокус и использовать только <reference-name>.focus()

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

Answer 3

После подходов можно использовать => 1. Вы можете сделать это директивой autoFoucs ИЛИ 2. Предоставить ссылку на свой контроль, как

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

Затем в TS файле объявить как этот

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

Answer 4

вы можете достичь этого, просто добавив атрибут «автофокусировка» к вашему элементу ввода, например.

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

Answer 5

HTML autofocus attribute сделать именно это

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