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

有blur和<input (blur)="onBlur()" (focus)="onFocus()">个事件：

public UserValues() {

}

Answer 2

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

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

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

状态：已访问控制

ng-touched
ng-untouched

状态：控件的值已更改

ng-dirty
ng-pristine

状态：控件的值有效

ng- valid
ng- invalid

Answer 3

对于使用@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>

Answer 4

您还可以使用@ angular / 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);
}

使用Angular 2+检测输入焦点

4 个答案: