Как использовать событие onBlur на Angular2?

Как вы обнаруживаете событие onBlur в Angular2? Я хочу использовать его с

<input type="text">

кто-нибудь может помочь мне понять, как его использовать?

58
angular javascript onblur

5 ответов

использовать (eventName) для привязки события к DOM, в основном () используется для привязки событий. Также используйте ngModel чтобы получить двустороннюю привязку для myModel переменной.

разметки

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

код

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

демо

альтернативные(не желательно)

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

демо

для моделей с приводом форма для проверки огня на blur, вы могли бы пройти

132

вы можете использовать непосредственно (размытие) событие в тег input.

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

и вы получите выход в "результат"

4
/*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

это предлагаемый ответ на репо 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): добавить опцию размытия updateOn в FormControls

1

для этого также можно использовать событие (focusout).

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

и в файле ts

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