Definition and Usage The onblur event occurs when an object loses focus. The onblur event is most often used with form validation code (e.g. when the user leaves a form field). Tip: The onblur event is the opposite of the onfocus event. Tip: The onblur event is similar to the onfocusout event.
The blur event fires when focus is lost. By default, a div element cannot have the focus in the first place so it can't be lost. If you set tabindex on a div, then it can gain the focus, but you should almost always be using a more appropriate element (such as a button) when you think about making interactive controls.
onBlur is a javascript event, fired when the input element lost its focus. You can see my previous about Angular button click event example Other versions available: React onBlur event guide example. Vue js Blur event example.
The main difference between this event and blur is that focusout bubbles while blur does not. The opposite of focusout is focusin .
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)
}
}
Demo
Alternative(not preferable)
<input type="text" #input (blur)="onBlurMethod($event.target.value)">
Demo
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]
});
Design Docs
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
}
}
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"
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()); }}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With