回答:
(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]
});
(focusout)イベントを使用することもできます。
(eventName)
イベントをDOMにバインドするときに使用します。基本的に()
は、イベントバインドに使用されます。また、を使用ngModel
して双方向のバインディングを取得することもできますmodel
。ngModel
あなたの助けを借りて、あなたのmodel
中で変数値を操作することができますcomponent
。
これをHTMLファイルで行う
<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">
(コンポーネント).tsファイル
export class AppComponent {
model: any;
constructor(){ }
someMethodWithFocusOutEvent(){
console.log('Your method called');
// Do something here
}
}
someMethodWithFocusOutEvent
アラートがフィールドのフォーカスを失うと、プログラムにループが入るメソッドにアラートを配置した場合、これを修正する方法はありますか?
/*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'
});