Bagaimana cara menggunakan acara onBlur di Angular2?

Bagaimana Anda mendeteksi acara onBlur di Angular2? Saya ingin menggunakannya dengan

<input type="text">

Adakah yang bisa membantu saya memahami cara menggunakannya?

Gunakan (eventName)untuk saat mengikat acara ke DOM, pada dasarnya ()digunakan untuk acara mengikat. Juga gunakan ngModeluntuk mendapatkan pengikatan dua arah untuk myModelvariabel.

Markup

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

Kode

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

Demo

Alternatif (tidak disukai)

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

Demo

Untuk formulir berdasarkan model untuk mengaktifkan validasi blur, Anda dapat meneruskan updateOnparameter.

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

Dokumen Desain

Anda juga dapat menggunakan acara (fokus) :

Gunakan (eventName)untuk saat mengikat acara ke DOM, pada dasarnya ()digunakan untuk acara mengikat. Anda juga dapat menggunakan ngModeluntuk mendapatkan pengikatan dua arah untuk Anda model. Dengan bantuan ngModelAnda dapat memanipulasi modelnilai variabel di dalam file component.

Lakukan ini dalam file HTML

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

Dan di file (komponen) .ts Anda

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

Anda dapat menggunakan langsung (blur) acara di tag input.

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

dan Anda akan mendapatkan keluaran dalam " hasil "

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

Ini adalah jawaban yang diusulkan di repo 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): tambahkan opsi updateOn blur ke FormControls

Coba gunakan (focusout) daripada (blur)