Wie verwende ich das onBlur-Ereignis auf Angular2?

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?

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

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

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 "

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

Dies ist die vorgeschlagene Antwort auf das Github-Repo:

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

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

Github: feat (Formulare): Fügen Sie FormControls die Option updateOn blur hinzu

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