使用Angular 2+檢測輸入焦點

Question

我正嘗試創建一個自動完成列表，該列表在您鍵入時出現，但在您單擊文檔中的其他位置時會消失。如何檢測表單輸入是否使用Angular 2. Angular 1具有ng-focus，但我認爲Angular 2不再支持。

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

順便說一句，我用這個教程爲guidance。

Answer 1

有focus和blur事件：

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

Answer 2

可以使用ngControl指令跟蹤表單字段的變化狀態和有效性。

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

NgControl指令用三個反映狀態的類更新控件。

國家：控制已被訪問

ng-touched 
ng-untouched 

國家：控件的值發生變化

ng-dirty 
ng-pristine 

國家：控件的值是有效

ng- valid 
ng- invalid