Detect Input Focus Using Angular 2+

问题:

I'm trying to create an auto-complete list that appears as you type, but disappears when you click elsewhere on the document. How do I detect that a form input is focused using Angular 2. Angular 1 has ng-focus, but I don't think Angular 2 supports that anymore.

<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>

By the way, I used this tutorial as guidance.

回答1:

There are focus and blur events:

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

回答2:

For those using @angular/material, you can get a reference to the MatInput instance which implements MatFormFieldControl interface exposing a nice focused property.

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

回答3:

You can use the ngControl directive to track change-state and validity of form fields.

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

The NgControl directive updates the control with three classes that reflect the state.

State: Control has been visited

ng-touched
ng-untouched

State: Control's value has changed

ng-dirty
ng-pristine

State: Control's value is valid

ng- valid
ng- invalid