Jak korzystać ze zdarzenia onBlur w Angular2?

112

Jak wykryć zdarzenie onBlur w Angular2? Chcę go używać z

<input type="text">

Czy ktoś może mi pomóc zrozumieć, jak go używać?

Ignat
źródło

Odpowiedzi:

211

Służy (eventName)do wiązania zdarzenia do DOM, w zasadzie ()służy do wiązania zdarzenia. Służy także ngModeldo uzyskania dwukierunkowego wiązania myModelzmiennej.

Narzut

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

Kod

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

Próbny

Alternatywa (nie preferowana)

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

Próbny


Aby formularz oparty na modelu uruchamiał walidację blur, można przekazać updateOnparametr.

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

Design Docs

Pankaj Parkar
źródło
2
Dlaczego alternatywa nie jest preferowana?
slashp
Angular nie chce, abyś używał zdarzenia $ w kodzie HTML do wysyłania z powrotem do JS. Wszystkie operacje DOM powinny być wykonywane za pomocą takich rzeczy, jak wiązania, ngModel i tak dalej.
Barton Durbin,
14

Możesz również użyć zdarzenia (focusout) :

Służy (eventName)do wiązania zdarzenia do DOM, w zasadzie ()służy do wiązania zdarzenia. Możesz także użyć, ngModelaby uzyskać dwukierunkowe wiązanie dla swojego pliku model. Z pomocą ngModelciebie możesz manipulować modelwartością zmiennej wewnątrz twojego component.

Zrób to w pliku HTML

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

Oraz w pliku (komponentu) .ts

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log('Your method called');
   // Do something here
 }
}
Aniket Kale
źródło
@Aniketkale Jeśli ustawię alert w Twojej metodzie, someMethodWithFocusOutEventprogram zapętli się, gdy alert powoduje utratę ostrości pola, czy istnieje sposób, aby to naprawić?
ps0604
6

możesz użyć zdarzenia bezpośrednio (rozmycie) w tagu wejściowym.

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

a otrzymasz wynik w „ wyniku

Chaudhary
źródło
3

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;
}
Sathish Visar
źródło
1
/*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()); }}
Er Mariam Akhtar
źródło
0

Spróbuj użyć (focusout) zamiast (blur)

Kevin Black
źródło