Як використовувати подію onBlur на Angular2?


112

Як виявити подію onBlur в Angular2? Я хочу його використовувати

<input type="text">

Хтось може допомогти мені зрозуміти, як ним користуватися?

Відповіді:


211

Використовувати (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, ви можете передати updateOnпараметр.

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

Документи дизайну


2
Чому альтернатива не є кращою?
косоокість

Angular не хоче, щоб ви використовували подія $ всередині HTML для повернення назад до JS. Усі операції з DOM повинні виконуватись через такі речі, як прив'язки, ngModel та багато чого іншого.
Barton Durbin

14

Ви також можете використовувати (фокусування) подію:

Використовувати (eventName)для прив'язки події до DOM, в основному ()використовується для прив'язки події. Також ви можете використовувати ngModelдля отримання двосторонньої прив'язки для свого model. За допомогою ngModelви можете маніпулювати modelзмінним значенням всередині вашогоcomponent .

Зробіть це у файлі HTML

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

І у вашому (компонентному) .ts файлі

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

@Aniketkale Якщо я поміщую попередження у ваш метод, someMethodWithFocusOutEventпрограма переходить у цикл, оскільки попередження змушує поле втрачати фокус, чи є спосіб це виправити?
ps0604

6

Ви можете використовувати безпосередньо (розмиття) події у вхідному тезі.

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

і ви отримаєте вихід у " результат "


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


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.