利用角度2 + 检测输入焦点

我正在尝试创建一个自动完成列表，它在您键入时出现，但当您单击文档的其他位置时消失。如何使用角度2检测表单输入是否聚焦。角度1有 ng- 焦点，但我不认为角度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>

顺便说一下，我用这个教程作为指引。

90333 次浏览

小开

最佳答案

有 focus和 blur赛事:

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

小开

可以使用 ngControl 指令跟踪表单字段的变更状态和有效性。

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

NgControl 指令用三个反映状态的类更新控件。

状态: 已访问控制中心

ng-touched
ng-untouched

状态: 控件的值已更改

ng-dirty
ng-pristine

状态: 控件的值有效

ng- valid
ng- invalid

小开

对于那些使用 @angular/material的用户，您可以获得对 MatInput实例的引用，该实例实现 MatFormFieldControl接口，并公开一个漂亮的 focused属性。

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

小开

您还可以使用@angle/cdk 中的 FocusMonitor。

Https://material.angular.io/guide/creating-a-custom-form-field-control#focused

focused = false;


constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
...
fm.monitor(elRef.nativeElement, true).subscribe(origin => {
this.focused = !!origin;
this.stateChanges.next();
});
}


ngOnDestroy() {
...
this.fm.stopMonitoring(this.elRef.nativeElement);
}