如何在 Angular2 上使用 onBlur 事件？

Question

你如何检测 Angular2 中的 onBlur 事件？我想与

一起使用

<input type="text">

任何人都可以帮助我了解如何使用它吗？

Answer 1

使用(eventName)绑定事件到DOM，基本上()用于事件绑定。还可以使用 ngModel 获得 myModel 变量的双向绑定。

标记

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

代码

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

Demo

备选（不优选）

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

Demo

要在 blur 上触发验证的模型驱动表单，您可以传递 updateOn 参数。

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

Design Docs

Answer 2

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

Answer 3

这是 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): add updateOn blur option to FormControls

Answer 4

可以直接在input标签中使用(blur)事件

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

您将在“结果”中得到输出

Answer 5

你也可以使用(focusout)事件：

绑定事件到DOM时使用(eventName)，基本上()用于事件绑定。您也可以使用 ngModel 为您的 model 获取双向绑定。在 ngModel 的帮助下，您可以在 component.

中操作 model 变量值

在 HTML 文件中执行此操作

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

并且在您的（组件）.ts 文件中

export class AppComponent { 
 model: any;
 constructor(){ }

 /*
 * This method will get called once we remove the focus from the above input box
 */
 someMethodWithFocusOutEvent() {
   console.log('Your method called');
   // Do something here
 }
}

Answer 6

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

Answer 7

尝试使用 (focusout) 而不是 (blur)

Answer 8

另一个可能的选择

HTML 组件文件：

<input formControlName="myInputFieldName" (blur)="onBlurEvent($event)">

TypeScript 组件文件：

import { OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyEditComponent implements OnInit {

    public myForm: FormGroup;
    
    constructor(private readonly formBuilder: FormBuilder) { }
    
    ngOnInit() {

        this.myForm = this.formBuilder.group({
            
            myInputFieldName: ['initial value', { validators: [Validators.required, Validators.maxLength(100), anotherValidator], updateOn: 'blur' }],

        });
    }

    onBlurEvent(event) {
        
        // implement here what you want

        if (event.currentTarget && event.currentTarget.value && event.currentTarget.value !== '') { }

    }
}

如何在 Angular2 上使用 onBlur 事件？

How to use onBlur event on Angular2?

javascript

onblur

angular