I want to track when an input's value changes and only when the element is blurred do I want the subscription to fire.
Of course I could do something like what I have below, but that's of course not very elegant. Any suggestions?
fromEvent(inputElement, 'input)
.subscribe((e) => {
fromEvent(inputElement, 'blur')
.subscribe((blurEv) => {
// Do something with inputElement.value
});
});
I guess I could just listen for the blur event, but there are still certain circumstances I would need to track minute input changes before the blur happens
You can set the updateOn option to blur, then form.valueChanges will only emit when a field is blurred:
export class AppComponent {
form = this.fb.group({
name : '',
age : '',
email : ''
}, {
updateOn: 'blur'
});
subscription = this.form.valueChanges.subscribe(
value => console.log('>>> value on blur:', value)
);
constructor(private fb: FormBuilder) { }
}
Here's a basic StackBlitz demo.
First, you should never subscribe within a subscribe. You can use observable flattening operators like concatMap, mergeMap, and switchMap. So the easiest thing you can do is fix that.
fromEvent(inputElement, 'input').pipe(
switchMap(() => fromEvent(inputElement, 'blur'))
).subscribe((blurEv) => {
// Do something with inputElement.value
});
Honestly it's hard to come up with something better unless without knowing more of your needs. The one issue with this is that the event subscription is going to get created after each input. You could solve that with merge and scan if you need to maintain a state.
The following uses merge to subscribe to focus and blur events only once. When focused an object with an oldval property is emitted, and when blurred an object with a newval property is emitted. The emissions are merged with the prior state using scan to create a new state. This will have the effect of creating an object with oldval and newval properties that can be compared.
merge(
fromEvent(el, 'focus').pipe(map(x => ({ oldval: el.value, state: 'hasfocus' }))),
fromEvent(el, 'blur').pipe(map(x => ({ newval: el.value, state: 'lostfocus' })))
).pipe(
scan((acc, cur) => ({ ...acc, ...cur }), {}),
filter(x => x.state === 'lostfocus')
).subscribe(/* Do something */);
Try this:
const blur$ = fromEvent(trackedEl, 'blur').pipe(take(1))
fromEvent(trackedEl, 'input').pipe(
distinctUntilChanged(),
switchMap(() => blur$)
).subscribe((v) => {
// Do work
})