如何在Angular2上使用onBlur事件?

使用 (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

备选方案1

<input type="text" [ngModel]="myModel" (ngModelChange)="myModel=$event">

备选方案2 (不优选)

<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

您还可以使用 (聚焦) 事件:

使用 (eventName) 在将事件绑定到DOM时,基本上 () 用于事件绑定。您还可以使用 ngModel 为您的 model .在的帮助下 ng型号 你可以操纵 模型 变量值 component .

在HTML文件中执行此操作

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

在(component).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
 }
}

你可以直接使用 (模糊) 输入标记中的事件。

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

你将在“ 后果 "

HTML语言

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

时间

removeSpaces(string) {
 let splitStr = string.split(' ').join('');
  return splitStr;
}

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

这是关于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

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

另一种可能的选择

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 !== '') { }

    }
}

我最终在Angular 14做了这样的事情

<form name="someForm" #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input
 matInput
 type="email"
 name="email"
 autocomplete="email"
 placeholder="EMAIL"
 [ngModel]="payload.email"
  #email="ngModel"
  (blur)="checkEmailBlur(f)"
  required
  email
  tabindex="1"
  autofocus
 />

然后…英寸

 checkEmailBlur(f: NgForm) {
     const email = f.value.email;