Angular2でonBlurイベントを使用するには？

Question

どのようにAngular2にonBlurイベントを検出していますか？私は

<input type="text"> 

でそれを使用したい は、誰も私がそれを使用する方法を理解するのに役立つことはできますか？ DOMにイベントをバインド中のため

Answer 1

使用(eventName)は、基本的に()は、イベントが結合するために使用されています。また、2つの方法は、myModel変数のバインディングを取得するためにngModelを使用しています。

マークアップ

<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

---

、あなたはupdateOnパラメータを渡すことができます。

ctrl = new FormControl('', { 
    debounce: 1000, 
    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

。

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

、あなたは "結果"