Как использовать событие 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
Почему альтернатива не предпочтительна?
slashp
Angular не хочет, чтобы вы использовали событие $ внутри HTML для отправки обратно в JS. Все операции с DOM должны выполняться через привязки, ngModel и многое другое.
Бартон Дурбин
14

Вы также можете использовать событие (focusout) :

Используется (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()); }}
Эр Мариам Ахтар
источник
0

Попробуйте использовать (focusout) вместо (blur)

Кевин Блэк
источник