Angular 2 benutzerdefinierter Status mit Attribut-Direktive

Question

Ich möchte eine kleine Direktive erstellen, um zu überprüfen, ob eine Eingabe in Vorlagenregeln fokussiert ist oder nicht. Es ist einfach, Komponenten mit (Fokus) und (Unschärfe) Ereignissen zu verwenden, aber dieser Code wird in jeder Form im Projekt sein. Es ist also eine gute Idee, eine Direktive zu erstellen.

Beachten Sie 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> 

Ich weiß, wie HostListener verwenden Fokuszustand wechselt zu fangen, aber ich weiß nicht, wie dieser Zustand im Element zu speichern, so dass es möglich ist, in einer Vorlage zu verwenden.

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 
    } 

} 

Endlich but not least is't möglich, die Richtlinie für jede Eingabe mit Typ Text oder Passwort standardmäßig vergeben?

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

Mit dieser Richtlinie auf zwei Arten mit dem hasFocus Wert

• die Richtlinie Referenzierung

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

• die Veranstaltung verbindlich

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