Angular 2+를 사용하여 입력 포커스 감지

Angular 2+를 사용하여 입력 포커스 감지

입력할 때 나타나는 자동 완성 목록을 작성하려고 하는데, 문서의 다른 곳을 누르면 사라집니다.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>

참고로 이 튜토리얼을 참고했습니다.

있다focus그리고.blur이벤트:

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

를 사용하는 사용자용@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>

@angular/cdk에서 Focus Monitor를 사용할 수도 있습니다.

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);
}

ngControl 지시어를 사용하여 양식 필드의 변경 상태 및 유효성을 추적할 수 있습니다.

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

NgControl 지침은 상태를 반영하는 세 가지 클래스로 컨트롤을 업데이트합니다.

상태: 컨트롤이 방문되었습니다.

ng-touched
ng-untouched

상태: 컨트롤의 값이 변경되었습니다.

ng-dirty
ng-pristine

상태: 컨트롤의 값이 유효합니다.

ng- valid
ng- invalid

언급URL : https://stackoverflow.com/questions/36755240/detect-input-focus-using-angular-2