web-dev-qa-db-fra.com

Angular 2 Définir le focus sur le premier champ de la fiche sur la charge du composant

Dans mon application, je souhaite définir automatiquement le focus sur le premier champ de la fiche lors du chargement des composants. Quelqu'un peut-il s'il vous plaît guider comment y parvenir sans aucune répétition comme je le veux sur chaque forme (formes réactives) dans mon application.

angularangular2-templateangular2-directivesangular2-forms
7
Naveed Ahmed

Vous devez utiliser une directive pour obtenir ce comportement.

Cela vous montrera comment faire: 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

vous pouvez y parvenir en ajoutant simplement l'attribut "autofocus" à votre élément d'entrée, comme.

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

Avec Angular 4 ， Le moteur de rendu est devenu obsolète, le mode de directive a donc disparu. Mais de toute façon, vous pouvez toujours utiliser une méthode "rapide et sale": ajoutez la référence à l'élément sur lequel vous souhaitez définir le focus et utilisez simplement <reference-name>.focus()

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

HTML attribut autofocus fait exactement cela

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

1
Yinon