en Angular2 cómo saber cuando CUALQUIER campo de entrada de formulario perdió el foco

Solución:

los blur El evento no burbujea, por lo tanto, debemos escuchar cada elemento de entrada directamente. Angular proporciona una buena solución para esta situación.

Una directiva que se aplica a todos los elementos de entrada dentro de su plantilla.

Esta directiva utiliza un escucha de host para escuchar el blur eventos en todos los elementos donde se aplica el selector y reenvía un burbujeo input-blur evento:

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

Añadiendo el BlurForwarder directiva para directives: [...] se aplicará a todos los elementos de su plantilla que coincidan con el selector.
El host-oyente escucha el burbujeo input-blur eventos y llamadas a nuestro controlador de eventos:

@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();
  }
}

¿Por qué no usar focusout it bubbles por defecto en el DOM?

Aquí hay una directiva simple que detecta focusout y verifica si el valor de entrada está en blanco, luego establece el valor en cero:

@Directive({
  selector: '[blankToZero]'
})
export class BlankToZeroDirective {
  constructor(private elementHost: ElementRef) { }

  @HostListener('focusout')
  ensureInput(): void {
    if (Util.isNullOrEmpty(this.elementHost.nativeElement.value)) {
      this.elementHost.nativeElement.value = 0;
    }
  }
}

---

---

Utiliza Nuestro Buscador