javascript - Hur man använder onBlur-händelsen i Angular2?

Hur upptäcker man ett onBlur-event i Angular2? Jag vill använda det med

<input type="text">

Kan någon hjälpa mig att förstå hur man använder det?

Svar #1

Använd (eventName) när du binder en händelse till DOM, i princip används () för händelsebindning. Använd också ngModel för att få tvåvägsbindning för myModel-variabeln.

Markup

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

Kod

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

Demo

Alternativ 1

<input type="text" [ngModel]="myModel" (ngModelChange)="myModel=$event">

Alternativ 2 (inte att föredra)

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

Demo

För ett modellstyrt formulär att utlösa validering vid blur, kan du använda updateOn-parametern.

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

Design-dokument

Svar #2

Du kan också använda (focusout)-händelsen:

Använd (eventName) när du binder ett event till DOM, i princip används () för eventbindning. Du kan också använda ngModel för att få tvåvägsbindning för din model. Med hjälp av ngModel kan du manipulera värdet på model-variabeln inuti din component.

Gör detta i HTML-fil

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

Och i din (komponent) .ts-fil

export class AppComponent { 
 model: any;
 constructor(){ }

 /*
 * This method will get called once we remove the focus from the above input box
 */
 someMethodWithFocusOutEvent() {
   console.log('Your method called');
   // Do something here
 }
}

Relaterade artiklar