it-swarm.com.de

Angular 2 Setzen Sie den Fokus auf das erste Formularfeld beim Laden der Komponenten

In meiner App möchte ich mich beim Laden der Komponenten automatisch auf das erste Formularfeld konzentrieren. Kann jemand bitte anleiten, wie dies ohne Wiederholung zu erreichen ist, da ich dies auf jedem Formular (Reactive Forms) in meiner App möchte.

7
Naveed Ahmed

Sie sollten eine Direktive verwenden, um dieses Verhalten zu erreichen.

Dies zeigt Ihnen, wie es geht: 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
mxii

sie können dies erreichen, indem Sie einfach das Attribut "Autofokus" zu Ihrem Eingabeelement hinzufügen.

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

Mit Angular 4 wurde der Renderer nicht mehr unterstützt, so dass der Weg der Direktive weg ist. Trotzdem können Sie immer eine "schnelle und schmutzige" Methode verwenden: Fügen Sie die Referenz zu dem Element hinzu, auf das Sie den Fokus setzen möchten, und verwenden Sie einfach <reference-name>.focus()

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

HTML Autofokus-Attribut genau das tun

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

1
Yinon

Folgende Ansätze können Sie verwenden => 1. Sie können dies mit der autoFoucs-Direktive tun OR 2. Geben Sie einen Verweis auf Ihr Steuerelement wie

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

Dann in ts Datei so deklarieren

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