Comment utiliser l'événement onBlur sur Angular2?

Comment détecter un événement onBlur dans Angular2? Je veux l'utiliser avec

<input type="text">

Quelqu'un peut-il m'aider à comprendre comment l'utiliser?

Utiliser (eventName)pour lors de la liaison d'un événement à DOM, ()est essentiellement utilisé pour la liaison d'événements. Utilisez également ngModelpour obtenir une liaison bidirectionnelle pour la myModelvariable.

Balisage

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

Code

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

Démo

Alternative (pas préférable)

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

Démo

Pour que le formulaire piloté par modèle déclenche la validation blur, vous pouvez passer le updateOnparamètre.

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

Documents de conception

Vous pouvez également utiliser l' événement (focusout) :

Utiliser (eventName)pour lors de la liaison d'un événement à DOM, ()est essentiellement utilisé pour la liaison d'événements. Vous pouvez également utiliser ngModelpour obtenir une liaison bidirectionnelle pour votre model. Avec l'aide de ngModelvous pouvez manipuler la modelvaleur de variable dans votre fichier component.

Faites cela dans un fichier HTML

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

Et dans votre fichier (composant) .ts

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

vous pouvez utiliser directement l' événement (flou) dans la balise d'entrée.

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

et vous obtiendrez la sortie dans " résultat "

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

Voici la réponse proposée sur le repo Github:

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

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

Github: feat (Forms): ajouter l'option updateOn blur à FormControls

Essayez d'utiliser (focusout) au lieu de (flou)