Angular 2 Ustaw ostrość na pierwszym polu formularza na obciążenie podzespołów.

Question

W mojej aplikacji chcę automatycznie ustawić fokus na pierwszym polu formularza przy ładowaniu komponentów. Czy ktoś może wskazać, jak to osiągnąć, bez powtarzania, jak tego chcę na każdym formularzu (formularze reaktywne) w mojej aplikacji.

Answer 1

Powinieneś użyć dyrektywy, aby osiągnąć to zachowanie.

To pokaże Ci drogę, jak to zrobić: 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

kątowo 4, Renderer została zaniechana, więc dyrektywa sposób zniknął. Ale tak czy owak zawsze można użyć „szybki i brudny” sposób: dodać odniesienie do elementu, który chcesz ustawić ostrość na i po prostu użyć <reference-name>.focus()

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

Answer 3

następujących metod można użyć => 1. Można zrobić ta dyrektywą autoFoucs LUB 2. podać odniesienie do kontroli jak

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

Następnie w pliku ts zadeklarować jak ten

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

Answer 4

możesz to osiągnąć, po prostu dodając atrybut "autofokus" do swojego elementu wejściowego, np.

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

Answer 5

HTML autofocus attribute zrobić dokładnie to

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