Angular2'de onBlur olayı nasıl kullanılır?

Angular2'de bir onBlur olayını nasıl tespit edersiniz? İle kullanmak istiyorum

<input type="text">

Biri nasıl kullanılacağını anlamama yardım edebilir mi?

Kullanım (eventName)DOM olay bağlama sırasında için, temelde ()olay bağlama için kullanılır. Ayrıca değişken ngModeliçin iki yönlü bağlanma elde etmek için kullanın myModel.

Biçimlendirme

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

kod

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

gösteri

Alternatif (tercih edilmez)

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

gösteri

Model güdümlü formun doğrulamayı başlatması için parametreyi blurgeçebilirsiniz updateOn.

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

Tasarım Belgeleri

Ayrıca (odaklanma) olayını da kullanabilirsiniz :

Kullanım (eventName)DOM olay bağlama sırasında için, temelde ()olay bağlama için kullanılır. Ayrıca sizin ngModeliçin iki yönlü bağlama almak için kullanabilirsiniz model. Yardımı ile kendi içindeki değişken değeri ngModeldeğiştirebilirsiniz .modelcomponent

Bunu HTML dosyasında yapın

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

Ve (component) .ts dosyanızda

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

giriş etiketinde doğrudan (bulanıklaştırma) etkinliği kullanabilirsiniz .

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

ve " sonuç " olarak çıktı alacaksınız

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

Github deposunda önerilen cevap şu:

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

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

GitHub: feat (formlar): FormControls'e updateOn bulanıklaştırma seçeneği ekleyin

(Bulanıklaştırma) yerine (odaklanma) kullanmayı deneyin