Cómo usar el evento onBlur en Angular2?

¿Cómo se detecta un evento onBlur en Angular2? Quiero usarlo con

<input type="text">

¿Alguien puede ayudarme a entender cómo usarlo?

Author: Shin, 2016-01-21
Source

5 answers

Use (eventName) para mientras enlaza evento a DOM, básicamente () se usa para enlazar eventos. También use ngModel para obtener un enlace bidireccional para la variable myModel.

Marcado

<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">

Código

export class AppComponent { 
  myModel: any;
  constructor(){
    this.myModel = '123';
  }
  onBlurMethod(){
   alert(this.myModel) 
  }
}

Demo

Alternativa (no preferible)

<input type="text" #input (blur)="onBlurMethod($event.target.value)">

Demo

Para que el formulario impulsado por el modelo active la validación en blur, puede pasar el parámetro updateOn.

ctrl = new FormControl('', {
   debounce: 1000, 
   updateOn: 'blur', //default will be change
   validators: [Validators.required]
});

Diseño Docs

 132
Author: Pankaj Parkar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-06 07:42:51

Puede utilizar directamente (desenfoque) evento en la etiqueta de entrada.

<div>
   <input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

Y obtendrá la salida en "resultado"

 4
Author: Chaudhary,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-05 12:00:45 
/*for reich text editor */
  public options: Object = {
    charCounterCount: true,
    height: 300,
    inlineMode: false,
    toolbarFixed: false,
    fontFamilySelection: true,
    fontSizeSelection: true,
    paragraphFormatSelection: true,

    events: {
      'froalaEditor.blur': (e, editor) => { this.handleContentChange(editor.html.get()); }}
 1
Author: Er Mariam Akhtar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-31 11:29:32

Esta es la respuesta propuesta en el repositorio de Github: 

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Github: feat (forms): añade la opción updateOn blur a FormControls

 1
Author: Ralph W,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-29 14:37:29

También puedes usar el evento (focusout) para eso.

<input type="text" [(ngModel)]="model" (focusout)="yourMethod($event)">

Y en el archivo ts

export class AppComponent { 
 model: any;
 constructor(){ }
 yourMethod(){
   console.log('your Method is called');
 }
}
 1
Author: Aniket kale,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-26 12:13:59