web-dev-qa-db-fra.com

Comment régler l'autofocus dans angular ou angular 2 pas angularjs

Je vois beaucoup de commentaires sur la manière de définir la mise au point automatique sur une entrée archivée dans angularjs en créant une mise au point automatique directive ou HTML. Existe-t-il un moyen rapide et facile de définir la mise au point en mode angulaire (angulaire 2, angulaire 4, etc.)

angularangular4
7
Aniruddha Das

Dans votre code HTML, ajoutez #nameit pour obtenir sa référence dans le code du composant.

<input type="text" name="me" #nameit>

Ensuite, appliquez auto fouces en elle. 

  @ViewChild('nameit') private elementRef: ElementRef;

  public ngAfterViewInit(): void {
    this.elementRef.nativeElement.focus();
  }
13
Aniruddha Das

La réponse d'Aniruddha Das fonctionne bien dans certains cas. Toutefois, si cela est appliqué à un formulaire basé sur un modèle avec la validation requise, le message d'erreur suivant peut s'afficher:

ExpressionChangedAfterItHasBeenCheckedError: L'expression a changé après> sa vérification. Valeur précédente: 'false'. Valeur actuelle: 'true'.

Une solution à cela consiste à intégrer l'appel focus () dans ngInit () au lieu de ngAfterViewInit (). Alors, prolongeant la réponse d'Aniduddha:

Dans votre code HTML, ajoutez le #namedReference au composant:

<input type="text"
    placeholder="Your full name"
    name="name"
    ngModel
    #fullName="ngModel"
    required
    #nameit>

Ensuite, utilisez onNgInit () pour appliquer la mise au point automatique:

@ViewChild('nameit') private elementRef: ElementRef;

ngOnInit() {
    this.elementRef.nativeElement.focus();
}
7
SuttonY
<input id="name" type="text" #myInput />
{{ myInput.focus() }}

Ajoutez {{ myInput.focus() }} dans votre modèle.

1
Sergey Gurin

vous pouvez utiliser l'exemple de la réponse la plus votée, mais parfois vous devez vous concentrer dans un setTimeout pour effectuer un appel "asynchrone" Dans mon cas, j'ai besoin de mettre setTimeout dans un filtre sélectionné de composant mat-autocomplete de matériau angulaire.

mon code ressemble à ceci

   setTimeout(() => this.qtdeRef.nativeElement.focus());
0
Pedro Gabriel