Come utilizzare l'evento onBlur su Angular2?

Come si rileva un evento onBlur in Angular2? Voglio usarlo con

<input type="text">

Qualcuno può aiutarmi a capire come usarlo?

Da utilizzare (eventName)durante l'associazione di eventi a DOM, fondamentalmente ()viene utilizzato per l'associazione di eventi. Utilizzare anche ngModelper ottenere un collegamento bidirezionale per la myModelvariabile.

markup

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

Codice

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

dimostrazione

Alternativa (non preferibile)

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

dimostrazione

Affinché il modulo basato su modello attivi la convalida blur, è possibile passare il updateOnparametro.

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

Documenti di progettazione

Puoi anche usare l' evento (focusout) :

Da utilizzare (eventName)durante l'associazione di eventi a DOM, fondamentalmente ()viene utilizzato per l'associazione di eventi. Inoltre puoi usare ngModelper ottenere un binding bidirezionale per il tuo file model. Con l'aiuto di ngModelpuoi manipolare il modelvalore della variabile all'interno del tuo file component.

Fallo nel file HTML

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

E nel tuo file (component) .ts

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

puoi usare direttamente l' evento (sfocatura) nel tag di input.

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

e otterrai l'output in " risultato "

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

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

Questa è la risposta proposta sul repository 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): aggiungi l'opzione updateOn blur a FormControls

Prova a usare (focusout) invece di (blur)