How to get the old state in a input by doing Undo (Ctrl + Z) when the value is formatted using...

I'm creating a thousand separator directive where 1234 will be shown as 1,234 visually but behind the scene it will be 1234 only. So after everything is working expected. Problem is happening when I'm pressing Ctrl + Z. I'm giving 1 case below -

When form loads input field is BLANK. Then I type 123 then do Ctrl + Z works fine it resets back to BLANK. Now if I type 1234 my directive transforms it to 1,234 but now if I do Undo it doesn't do anything. Which in this case also I want to reset it to BLANK or whatever the state was previously like normally happens.

When I debugged the code I found that Ctrl + Z does try to make it BLANK but during that time the directive opposes it by again reperforming same operation which creates an image that it doesn't do anything. You can view my Stackblitz solution which I tried.

Directive code:

import { Directive, ElementRef, HostListener, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
selector: '[thousandSeperator]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ThousandSeperatorDirective),
multi: true,
},
],
standalone: true,
})
export class ThousandSeperatorDirective implements ControlValueAccessor {
private onChange: (_: any) => void = () => {};
private onTouched: () => void = () => {};
constructor(private el: ElementRef) {}

@HostListener('input', ['$event'])
@HostListener('paste', ['$event'])
@HostListener('blur', ['$event'])
onInput(event: Event | ClipboardEvent) {
const rawValue = (event.target as HTMLInputElement).value;
const unformattedValue = rawValue.replace(/,/g, '');

this.onChange(unformattedValue);

if (rawValue) {
const formattedValue = this.formatValue(unformattedValue);
setTimeout(() => (this.el.nativeElement.value = formattedValue), 0);
}
}

writeValue(value: any): void {
if (value || value == 0) {
this.el.nativeElement.value = this.formatValue(value);
} else {
this.el.nativeElement.value = '';
}
}

registerOnChange(fn: any): void {
this.onChange = fn;
}

registerOnTouched(fn: any): void {
this.onTouched = fn;
}

private formatValue(value: string): string {
const [integer, decimal] = value.toString().split('.'),
HAS_DECIMAL_POINT = value.toString().includes('.');
return (
integer.replace(/,/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
(decimal ? `.${decimal}` : !decimal && HAS_DECIMAL_POINT ? '.' : '')
);
}
}


HTML -

<input [formControl]="abc" thousandSeperator />

Continue reading...