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