web-dev-qa-db-fra.com

Angular 2 - Mettre le focus sur un élément

J'ai un appel asynchrone/http et je souhaite définir le focus sur un élément error dans le modèle si un appel asynchrone génère une erreur.

  • Une solution consiste à injecter la méthode ElementRef, puis à utiliser JQuery pour accéder à un élément et à appeler la méthode focus ().

class MyComponent {
   
    constructor(private element: ElementRef) {}

    doAsync() {
        // do something async

        $(this.element.nativeElement).find('.error').focus();
    }
}

  • Une autre méthode consiste à créer une directive, qui se lie à une propriété du modèle et appelle la méthode focus () sur l'élément Host.

Quelle est la qualité d'inclure/utiliser JQuery dans angular 2?

De plus, je crois que la méthode Angular est censée fonctionner (MV *) consiste à "modifier le modèle en fonction duquel la vue réagit}". Alors, quelle est la bonne façon de le faire?

angularangular2-template
4
EagerToLearn

Essayons cela dans votre composante de focus

 import --> AfterViewInit

 export class YourComponent implements AfterViewInit {
   @ViewChild('err') vc: any;


  ngAfterViewInit() {
    this.vc.nativeElement.focus();
  }
}

utiliser ce composant html

<div #err class="alert alert-danger>{{errorPrompt}}</div>
12
yala ramesh

Dans le résultat de votre fonction asynchrone, définissez une propriété sur le composant pour afficher ou masquer le message d'erreur.

class MyComponent {

    hasErrors = false;
    errorPrompt = ""; 

    constructor() {}

    doAsync() {
        // do something async
        this.hasErrors = true;
        this.errorPrompt = "Fix the errors.";
    }
}

Dans la marque:

<div class="alert alert-danger" *ngIf="hasErrors">{{errorPrompt}}</div>
0
Joel Richman

Vous n'êtes pas tout à fait sûr du type d'élément '.error', mais vous pouvez essayer quelque chose comme ça

class MyComponent {

    constructor(private renderer: Renderer2) { }

    doAsync() {
        // do something async

        setTimeout(() => {
            const element = this.renderer.selectRootElement('.error');
            if (element) {
                element.focus();
            }
        }, 200);
    }

}

J'ai trouvé que setTimeout est parfois nécessaire si l'élément est imbriqué dans un * ngIf. Bien que ce ne soit pas la solution la plus propre, il vaut au moins mieux d’inclure jquery. Vous pouvez également définir votre propre directive pour une référence de mise au point automatique.

0
a3uge