在Angular2中如何知道何时任何表单输入字段失去焦点

Question

在Angular2中如何知道任何输入字段何时失去焦点..!如果我在表单上使用observable:

form.valueChange.subscribe...

不会工作,因为我真的想知道什么时候一个字段丢失它的模糊(焦点)所以我可以更新我的商店(如果我在失去焦点之前更新商店,我的光标在文本输入上移动到最后,因为数据被交换这看起来很奇怪)

当然我也可以添加(change)=""每个输入,但我有很多'...

我在考虑各种各样的事情:

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: [...]将应用于其模板中与选择器匹配的所有元素.
host-listener侦听冒泡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

为什么不在DOM中默认使用focusout它起泡