in Angular2如何知道何時表單輸入字段丟失焦點

Question

在Angular2中如何知道何時輸入字段失去焦點..！ 如果我使用觀測的形式：

form.valueChange.subscribe... 

不會工作，因爲我真的很想知道，當一個領域失去了它的模糊（焦點），所以我可以更新我的商店（如果我失去焦點之前更新商店，我光標輸入被移動到最後文本，因爲得到的數據交換是怪異）

當然

我還可以在每個輸入添加(change)=""，但我有很多of'em ...

我在想什麼種類的：

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

但問題是髒髒保留，所以它停留在變化檢測的一個永恆的環...

TX

肖恩

Answer 1

的blur事件不會泡沫，因此我們需要直接監聽每個輸入元素。 Angular爲這種情況提供了一個很好的解決方案。

一個適用於模板內所有輸入元素的指令。

這個指令使用主機監聽監聽所有元素blur比賽時，選擇應用和轉發冒泡input-blur事件：

@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 
    } 
} 

通過添加BlurForwarder指令directives: [...]這將是應用於其模板中與選擇器匹配的所有元素。
主機監聽監聽冒泡input-blur事件並調用事件處理程序：

@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

爲什麼不使用focusout它泡在默認情況下在DOM