Como usar o evento onBlur no Angular2?


112

Como você detecta um evento onBlur no Angular2? Eu quero usar com

<input type="text">

Alguém pode me ajudar a entender como usá-lo?

Respostas:


211

Use (eventName)para o evento de vinculação ao DOM, basicamente ()é usado para vinculação de evento. Use também ngModelpara obter uma ligação bidirecional para a myModelvariável.

Markup

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

Código

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

Demo

Alternativa (não preferível)

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

Demo


Para o formulário baseado em modelo para disparar a validação blur, você pode passar o updateOnparâmetro.

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

Design Docs


2
Por que a alternativa não é preferível?
slashp de

O Angular não quer que você use o evento $ dentro do HTML para enviar de volta ao JS. Todas as operações DOM devem ser feitas por meio de coisas como ligações, ngModel e outros enfeites.
Barton Durbin

14

Você também pode usar o evento (focusout) :

Use (eventName)para o evento de vinculação ao DOM, basicamente ()é usado para vinculação de evento. Além disso, você pode usar ngModelpara obter uma ligação bidirecional para o seu model. Com a ajuda de ngModelvocê pode manipular o modelvalor da variável dentro do seu component.

Faça isso no arquivo HTML

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

E em seu arquivo .ts (componente)

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

@Aniketkale Se eu colocar um alerta em seu método, someMethodWithFocusOutEvento programa entra em um loop conforme o alerta faz o campo perder o foco, há uma maneira de corrigir isso?
ps0604

6

você pode usar o evento diretamente (desfoque) na tag de entrada.

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

e você obterá a saída em " resultado "


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

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


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.