web-dev-qa-db-fra.com

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

Comment détecter un événement onBlur dans Angular2? Je souhaite l’utiliser avec

<input type="text">

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

javascriptangularonblur
68
Ignat

Utilisez (eventName) pour les événements liés au DOM, () est utilisé pour la liaison des événements. Utilisez également ngModel pour obtenir une liaison bidirectionnelle pour la variable myModel.

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 le modèle déclenche la validation sur blur, vous pouvez passer le paramètre updateOn.

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

Documents de conception

154
Pankaj Parkar

vous pouvez également utiliser l'événement (focusout) pour cela.

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

Et dans son dossier

export class AppComponent { 
 model: any;
 constructor(){ }
 yourMethod(){
   console.log('your Method is called');
 }
}
6
Aniket kale

vous pouvez utiliser directement (flou) event dans la balise input.

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

et vous obtiendrez une sortie dans " result "

5
Chaudhary
/*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()); }}
1
Er Mariam Akhtar

Voici la réponse proposée sur le dépôt 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): ajout de l'option updateOn blur à FormControls

1
Ralph W

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;
}
0
Sthish Visar