Angular 2將重點放在組件加載的表單的第一個字段

Question

在我的應用程序中，我想自動將焦點放在組件加載的第一個表單域上。任何人都可以請指導如何實現這個沒有任何重複，因爲我想要在我的應用程序中的每個窗體（Reactive窗體）。

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>