How to use onBlur event on Angular2?
JavascriptAngularOnblurJavascript Problem Overview
How do you detect an onBlur event in Angular2? I want to use it with
<input type="text">
Can anyone help me understand how to use it?
Javascript Solutions
Solution 1 - Javascript
Use (eventName)
for while binding event to DOM, basically ()
is used for event binding. Also use ngModel
to get two way binding for myModel
variable.
Markup
<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">
Code
export class AppComponent {
myModel: any;
constructor(){
this.myModel = '123';
}
onBlurMethod(){
alert(this.myModel)
}
}
Alternative(not preferable)
<input type="text" #input (blur)="onBlurMethod($event.target.value)">
For model driven form to fire validation on blur
, you could pass updateOn
parameter.
ctrl = new FormControl('', {
updateOn: 'blur', //default will be change
validators: [Validators.required]
});
Solution 2 - Javascript
You can also use (focusout) event:
Use (eventName)
for while binding event to DOM, basically ()
is used for event binding. Also you can use ngModel
to get two way binding for your model
. With the help of ngModel
you can manipulate model
variable value inside your component
.
Do this in HTML file
<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">
And in your (component) .ts file
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
}
}
Solution 3 - Javascript
you can use directly (blur) event in input tag.
<div>
<input [value]="" (blur)="result = $event.target.value" placeholder="Type Something">
{{result}}
</div>
and you will get output in "result"
Solution 4 - Javascript
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;
}
Solution 5 - Javascript
/*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()); }}
Solution 6 - Javascript
This is the proposed answer on the 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): add updateOn blur option to FormControls
Solution 7 - Javascript
Try to use (focusout) instead of (blur)
Solution 8 - Javascript
Another possible alternative
HTML Component file:
<input formControlName="myInputFieldName" (blur)="onBlurEvent($event)">
TypeScript Component file:
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 !== '') { }
}
}