如何在 Angular2 上使用 onBlur 事件？

Question

如何在 Angular2 中檢測到 onBlur 事件？ 我想用它

<input type="text">

誰能幫我理解如何使用它？

Answer 1

將事件綁定到 DOM 時使用(eventName) ，基本上()用於事件綁定。 此外，使用ngModel為myModel變量獲取雙向綁定。

標記

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

代碼

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

演示

---

備選方案 1

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

---

備選方案 2 （不優選）

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

演示

---

對於要在blur上觸發驗證的模型驅動表單，您可以傳遞updateOn參數。

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

設計文檔

Answer 2

您還可以使用(focusout)事件：

使用(eventName)將事件綁定到 DOM，基本上()用於事件綁定。 您也可以使用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 3

您可以在輸入標簽中直接使用（模糊）事件。

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

你會在“結果”中得到輸出

Answer 4

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 5

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

這是 Github repo 上的建議答案：

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Github：feat(forms)：向 FormControls 添加 updateOn blur 選項

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

    }
}

Answer 9

我最終在 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
 />

然后... in.ts

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