在Angular2中如何知道任何表单input字段何时失去焦点
在Angular2如何知道任何input字段失去焦点..！ 如果我在表单上使用observables：
form.valueChange.subscribe... 无法工作，因为我真的想知道什么时候一个领域失去了模糊（焦点），所以我可以更新我的商店（如果我失去焦点之前更新商店，我的光标在文本input移动到最后，因为数据被交换这是奇怪的看起来）
当然，我也可以添加(change)=""在每个input，但我有很多'…
我在想什么：
this.form.valueChanges.debounceTime(1000).subscribe((changes:any) => { if (this.form.dirty){ this.appStore.dispatch(this.resellerAction.updateResellerInfo(changes)) } });
但问题是，肮脏仍然肮脏，所以它陷入了一个永恒的变化检测循环…
TX
肖恩
blur事件不起泡，因此我们需要直接监听每个input元素。 Angular为这种情况提供了一个很好的解决scheme。
适用于模板内所有input元素的指令。
此指令使用主机侦听器侦听select器应用的所有元素上的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: [...]它将被应用于其模板中与select器相匹配的所有元素。
主机侦听器侦听冒泡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(); } }
为什么不在DOM中使用默认的焦点呢？
