Угловое 2 настраиваемое состояние с директивой атрибута

Question

Я хотел бы создать небольшую директиву для проверки ввода сфокусирован или нет в правилах шаблонов. Простая в использовании компонента с (фокус) и (размытие) событий, но этот код будет в каждой форме в проекте. Поэтому неплохо создать директиву.

Пожалуйста, обратите внимание на somefield.focused

<div class="form-group" [ngClass]="{'error': !somefield.valid && !somefield.focused }"> 
    <div class="controls"> 
    <input type="text" class="form-control" name="somefield" [(ngModel)]="model.somefield" #somefield="ngModel" required minlength="5" maxlength="15" /> 
    <div class="error-block" *ngIf="!somefield.valid && somefield.errors?">Some error occurred</div> 
    </div> 
</div> 

Я знаю, как использовать HostListener поймать фокус изменения состояния Но я не знаю, как сохранить это состояние в элементе так, что можно использовать в качестве шаблона.

import { Directive, ElementRef, HostListener } from '@angular/core'; 

@Directive({ 
    selector: 'input[focused]' 
}) 

export class FocusedDirective { 

    constructor(private el: ElementRef) { 
    // TODO: set focused to false 
    } 

    @HostListener('blur', ['$event']) 
    onBlur(e) { 
    // TODO: set focused to false 
    } 

    @HostListener('focus', ['$event']) 
    onFocus(e) { 
    // TODO: set focused to true 
    } 

} 

По крайней мере, возможно ли присвоить директиву любой ввод с типом текста или пароля по умолчанию?

Answer 1

@Directive({ 
    selector: 'input[focused]', 
    exportAs: 'hasFocus' 
}) 

export class FocusedDirective { 

    hasFocus:boolean = false; 
    focusChange:EventEmitter<boolean> = new EventEmitter<boolean>(); 

    constructor(private el: ElementRef) {} 

    @HostListener('blur', ['$event']) 
    onBlur(e) { 
    this.hasFocus = false; 
    this.focusChange.emit(this.hasFocus); 
    } 

    @HostListener('focus', ['$event']) 
    onFocus(e) { 
    this.hasFocus = true; 
    this.focusChange.emit(this.hasFocus); 
    } 
} 

Эта директива предусматривает два способа использования значения hasFocus

• ссылки на директиву

<input focused #isFocused="hasFocus"> 
<div>has focus: {{isFocused.hasFocus}}</div> 

• привязки к событию

<input focused (focusChange)="isFocused = $event"> 
<div>has focus: {{isFocused}}</div>