В Angular2, как узнать, когда ЛЮБОЕ поле ввода формы потеряло фокус

Question

В Angular2 как узнать, когда ЛЮБОЕ поле ввода потеряло фокус! Если я использую наблюдаемые в форме:

form.valueChange.subscribe...

не будет работать, так как я действительно хочу знать, когда поле потеряно, это размытие (фокус), поэтому я могу обновить свой магазин (если я обновляю магазин до потери фокуса, мой курсор на вводе текста перемещается в конец, так как данные меняются местами что странно выглядит)

конечно я могу также добавить (change)="" на каждом входе, но у меня их много...

Я думал о чем-то вроде:

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

но проблема в том, что грязь остается грязной, поэтому она застряла в вечном цикле обнаружения изменений...

Техас

Шон

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