em Angular2 como saber quando qualquer campo de input do formulário perdeu o foco

Em Angular2 como saber quando qualquer campo de input perdeu o foco ..! Se eu usar observables no formulário:

form.valueChange.subscribe... 

não funcionará, pois eu realmente quero saber quando um campo perdeu seu desfoque (foco) para poder atualizar minha loja (se eu atualizar a loja antes de perder o foco, meu cursor em uma input de texto é movido para o final, pois os dados são trocados que é estranho)

Claro que eu também posso adicionar (change)="" em cada input, mas eu tenho muito deles …

Eu estava pensando em algo do tipo:

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

mas o problema é que a sujeira continua suja, então ela fica presa em um loop eterno de detecções de mudança …

tx

Sean

O evento de blur não borbulha, portanto, precisamos escutar cada elemento de input diretamente. Angular fornece uma boa solução para esta situação.

Uma diretiva que se aplica a todos os elementos de input dentro do seu modelo.

Essa diretiva usa um ouvinte de host para ouvir os events de blur em todos os elementos em que o seletor se aplica e encaminha um evento de input-blur borbulhante:

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

Adicionando a diretiva BlurForwarder às directives: [...] ela será aplicada a todos os elementos em seu modelo que correspondem ao seletor.
O ouvinte do host ouve events de input-blur borbulhando e chama nosso manipulador de events:

 @Component({ selector: 'my-component', directives: [BlurForwarder], host: {'(input-blur)':'onInputBlur($event)'}, template: ` 
` }) { onInputBlur(event) { doSomething(); } }

Por que não usar o focusout bolhas por padrão no DOM