Preventing default on keydown in an Angular directive and ngModel

Question

Edit: I have solved my own question with ngModelChange.emit($event.target.value) on blur.

I have a requirement to show a date mask in an input field like

__/__/____

and as the user types it replaces the under scores with the numbers they type. I have created a directive that works quite well but calling preventDefault on the keydown event kills ngModel. If I don't prevent default the text replacement is not as smooth as they keypressed character appears in the text and then my replaced text appears. It is not a nice smooth result.

I have a StackBlitz here.

https://stackblitz.com/edit/angular-iucv4f

Does anyone have any ideas on a different way to mask the input or to get ngModel working with the way I am doing it?

Just curious... have you ever actually heard of Google? Honest question. — fulvio
Problem is I cannot npm install from the wild, we have a security audited internal npm repository and getting packages authorised by security is a huge pain. — Adrian Brand

Adrian Brand Adrian Brand · Accepted Answer · 2018-06-20T06:15:14

I have used

@Output() ngModelChange: EventEmitter<any> = new EventEmitter();

@HostListener('blur', ['$event'])
onBlur($event) {
    this.ngModelChange.emit($event.target.value);
}

so that ngModel is updated on blur

Preventing default on keydown in an Angular directive and ngModel

1 Answers