Wie verwende ich das onBlur-Ereignis auf Angular2?

112

Wie erkennt man ein onBlur-Ereignis in Angular2? Ich möchte es mit verwenden

<input type="text">

Kann mir jemand helfen zu verstehen, wie man es benutzt?

Ignat
quelle

Antworten:

211

Die Option (eventName)zum Binden von Ereignissen an DOM wird im Wesentlichen ()für die Ereignisbindung verwendet. Verwenden Sie ngModeldiese Option auch , um eine bidirektionale Bindung für myModelVariablen zu erhalten.

Markup

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

Code

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

Demo

Alternative (nicht vorzuziehen)

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

Demo


Für eine modellgesteuerte Form, für die die Validierung ausgelöst werden soll blur, können Sie updateOnParameter übergeben.

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

Design Docs

Pankaj Parkar
quelle
2
Warum ist die Alternative nicht vorzuziehen?
Slashp
Angular möchte nicht, dass Sie das $ -Ereignis im HTML-Code verwenden, um es an JS zurückzusenden. Alle DOM-Operationen sollten über Dinge wie Bindungen, ngModel und so weiter ausgeführt werden.
Barton Durbin
14

Sie können auch das Ereignis (focusout) verwenden :

Die Option (eventName)zum Binden von Ereignissen an DOM wird im Wesentlichen ()für die Ereignisbindung verwendet. Sie können auch verwenden ngModel, um eine bidirektionale Bindung für Ihre zu erhalten model. Mit Hilfe von können ngModelSie den modelVariablenwert in Ihrem manipulieren component.

Tun Sie dies in einer HTML-Datei

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

Und in Ihrer (Komponenten-) .ts-Datei

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log('Your method called');
   // Do something here
 }
}
Aniket Grünkohl
quelle
@Aniketkale Wenn ich eine Warnung in Ihre Methode eingebe someMethodWithFocusOutEvent, tritt das Programm in eine Schleife ein, da die Warnung das Feld seinen Fokus verliert. Gibt es eine Möglichkeit, dies zu beheben?
ps0604
6

Sie können das Ereignis direkt (Unschärfe) im Eingabe-Tag verwenden.

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

und Sie erhalten die Ausgabe in " Ergebnis "

Chaudhary
quelle
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
quelle
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
quelle
0

Versuchen Sie, (focusout) anstelle von (unschärfe) zu verwenden.

Kevin Black
quelle