w Angular2, jak sprawdzić, czy pole wejściowe dowolnego formularza straciło ostrość:

Question

W aplikacji Angular2, jak sprawdzić, czy KAŻDE pole wejściowe utraciło ostrość ...! Jeśli używam obserwable na formularzu:

form.valueChange.subscribe... 

przyzwyczajenie praca, ponieważ naprawdę chcę wiedzieć, kiedy pole stracił to rozmycie (ostrość), więc mogę zaktualizować mój sklep (jeśli zaktualizować sklep przed utratą ostrości, mój kursor na tekście wejście zostanie przesunięty na koniec, ponieważ dane zostaną zamienione co jest dziwne patrząc)

oczywiście mogę również dodać (change)="" na każdym wejściu, ale mam dużo of'em ...

Myślałem o czymś w rodzaju:

this.form.valueChanges.debounceTime(1000).subscribe((changes:any) => { 
    if (this.form.dirty){ 
    this.appStore.dispatch(this.resellerAction.updateResellerInfo(changes)) 
    } 
}); 

ale problemem jest to, że pozostaje brudny brudny, więc tkwi w wiecznej pętli zmian wykrytych ...

TX

Sean

Answer 1

Impreza blur nie bańka, dlatego musimy słuchać bezpośrednio każdego elementu wejściowego. Angular stanowi dobre rozwiązanie dla tej sytuacji.

Dyrektywa odnosząca się do wszystkich elementów wejściowych w szablonie.

Dyrektywa ta używa host-słuchacza do słuchania dla blur zdarzeń na wszystkich elementach gdzie selektor stosuje i przekazuje bulgotanie input-blur zdarzenie:

@Directive({ 
    selector: 'input,select', 
    host: {'(blur)': 'onBlur($event)'} 
}) 
class BlurForwarder { 
    constructor(private elRef:ElementRef, private renderer:Renderer) {} 

    onBlur($event) { 
    this.renderer.invokeElementMethod(this.elRef.nativeElement, 
     'dispatchEvent', 
     [new CustomEvent('input-blur', { bubbles: true })]); 
    // or just 
    // el.dispatchEvent(new CustomEvent('input-blur', { bubbles: true })); 
    // if you don't care about webworker compatibility 
    } 
} 

Dodając dyrektywę BlurForwarder do directives: [...] będzie zastosowane do wszystkich elementów w szablonie pasujących do selektora.
Gospodarz-słuchacz nasłuchuje przepuszczając input-blur wydarzeń i wzywa nasz obsługi zdarzenia:

@Component({ 
    selector: 'my-component', 
    directives: [BlurForwarder], 
    host: {'(input-blur)':'onInputBlur($event)'}, 
    template: ` 
<form> 
    <input type="text" [(ngModel)]="xxx"> 
    <input type="text" [(ngModel)]="yyy"> 
    <input type="text" [(ngModel)]="zzz"> 
</form>` 
}) { 
    onInputBlur(event) { 
    doSomething(); 
    } 
} 

Answer 2

Dlaczego nie skorzystać focusout pęcherzyki domyślnie w słodkiej odpowiedź DOM