web-dev-qa-db-fra.com

Détecter le focus d’entrée à l’aide de Angular 2+

J'essaie de créer une liste de saisie semi-automatique qui apparaît au fur et à mesure que vous tapez, mais disparaît lorsque vous cliquez ailleurs sur le document. Comment est-ce que je détecte qu'une entrée de formulaire est focalisée en utilisant Angular 2. Angular 1 a ng-focus, mais je ne pense pas Angular 2 ne le supporte plus.

<input id="search-box" type="search" class="form-control [(ngModel)]=query (keyup)=filter()>
    <div id="search-autocomplete" *ngIf="filteredList.length > 0">
        <ul *ngFor="#item of filteredList" >
            <li > <a (click)="select(item)">{{item}}</a> </li>
        </ul>
    </div>

A propos, j'ai utilisé ce tutoriel comme guidance .

webtypescriptangular
37
wpakt

Il y a focus et blur événements:

<input (blur)="onBlur()" (focus)="onFocus()">
73
kemsky

Vous pouvez utiliser la directive ngControl pour suivre l'état de modification et la validité des champs de formulaire.

<input type="text" ngControl="name" />

La directive NgControl met à jour le contrôle avec trois classes qui reflètent l'état.

Etat: Le contrôle a été visité

ng-touched
ng-untouched

Etat: la valeur du contrôle a changé

ng-dirty
ng-pristine

Etat: la valeur du contrôle est valide

ng- valid
ng- invalid
1
E. Muñoz

Pour ceux qui utilisent @angular/material, vous pouvez obtenir une référence à l’instance MatInput qui implémente l’interface MatFormFieldControl exposant une propriété Nice focused.

<mat-form-field>
  <input matInput #searchInput="matInput" type="text" />
  <mat-icon matPrefix svgIcon="filter" [color]="searchInput.focused ? 'primary' : ''"></mat-icon>
</mat-form-field>
0
jdat82