จะใช้ onBlur event บน Angular2 ได้อย่างไร?

คุณตรวจจับเหตุการณ์ onBlur ใน Angular2 ได้อย่างไร? ฉันต้องการใช้กับ

<input type="text">

ใครสามารถช่วยฉันเข้าใจวิธีการใช้งาน

ใช้(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]
}); 

ออกแบบเอกสาร

คุณยังสามารถใช้เหตุการณ์(โฟกัสเอาต์) :

ใช้(eventName)ในขณะที่เชื่อมโยงเหตุการณ์กับ DOM โดยทั่วไป()จะใช้สำหรับการผูกเหตุการณ์ นอกจากนี้คุณสามารถใช้ngModelเพื่อรับการผูกสองทางสำหรับmodelไฟล์. ด้วยความช่วยเหลือของngModelคุณสามารถจัดการmodelค่าตัวแปรภายในcomponentไฟล์.

ทำในไฟล์ HTML

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

และในไฟล์ (component) .ts ของคุณ

export class AppComponent { 
 model: any;
 constructor(){ }
 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="">

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

นี่คือคำตอบที่เสนอใน repo Github:

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

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

Github: feat (แบบฟอร์ม): เพิ่มตัวเลือก updateOn เบลอให้กับ FormControls

พยายามใช้ (focusout) แทน (เบลอ)