javascript - event - onblur angular4

¿Cómo usar el evento onBlur en Angular2?

Question

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

<input type="text">

¿Alguien puede ayudarme a entender cómo usarlo?

Answer 1

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 (formularios): agrega la opción updateOn blur a FormControls

Answer 2

También puede usar el evento (focusout) :

Use (eventName) para vincular el evento a DOM, básicamente () se utiliza para el enlace de eventos. También puede usar ngModel para obtener un enlace bidireccional para su model . Con la ayuda de ngModel puede manipular el valor de la variable del model dentro de su component .

Haz esto en un archivo HTML

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

Y en su (componente) archivo .ts

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log(''Your method called'');
   // Do something here
 }
}

Answer 3

Use (eventName) para vincular el evento a DOM, básicamente () se utiliza para el enlace de eventos. También use ngModel para obtener un enlace bidireccional para la variable myModel .

Margen

<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 la validación del formulario dirigido por el modelo en el blur , puede pasar el parámetro updateOn .

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

Documentos de diseño

Answer 4

puede usar el evento directamente (desenfoque) en la etiqueta de entrada.

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

y obtendrá salida en " resultado "

Answer 5

HTML

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

TS

removeSpaces(string) {
 let splitStr = string.split('' '').join('''');
  return splitStr;
}

Answer 6

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