Làm thế nào để sử dụng sự kiện onBlur trên Angular2?

Làm thế nào để bạn phát hiện một sự kiện onBlur trong Angular2? Tôi muốn sử dụng nó với

<input type="text">

Bất cứ ai có thể giúp tôi hiểu cách sử dụng nó?

Sử dụng (eventName)trong khi ràng buộc sự kiện với DOM, về cơ bản ()được sử dụng để ràng buộc sự kiện. Cũng sử dụng ngModelđể có được ràng buộc hai chiều cho myModelbiến.

Đánh dấu

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

Mã

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

Bản giới thiệu

Thay thế (không thích hợp)

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

Bản giới thiệu

Đối với biểu mẫu hướng mô hình để kích hoạt xác thực blur, bạn có thể chuyển updateOntham số.

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

Tài liệu thiết kế

Bạn cũng có thể sử dụng sự kiện (tiêu điểm) :

Sử dụng (eventName)trong khi ràng buộc sự kiện với DOM, về cơ bản ()được sử dụng để ràng buộc sự kiện. Ngoài ra, bạn có thể sử dụng ngModelđể có được ràng buộc hai chiều cho của bạn model. Với sự giúp đỡ của ngModelbạn, bạn có thể thao tác modelgiá trị biến bên trongcomponent .

Làm điều này trong tệp HTML

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

Và trong tệp .ts (thành phần) của bạn

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

bạn có thể sử dụng sự kiện trực tiếp (làm mờ) trong thẻ đầu vào.

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

và bạn sẽ nhận được đầu ra trong " kết quả "

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

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

Đây là câu trả lời được đề xuất trên 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 (các biểu mẫu): thêm tùy chọn updateOn mờ vào FormControls

Cố gắng sử dụng (tiêu điểm) thay vì (mờ)