Angular 2/4 keypress with Firefox

Question

I'm using Angular 4 with Firefox 57 and I have the following input field:

<input mdbActive type="tel" id="phoneNumber" class="form-control" [(ngModel)]="userdetail.phoneNumber" required (keypress)="restrictNumberInput($event)" (paste)="false">

The backend code is:

restrictNumberInput(event: any) {
    let regexStr = '^[0-9]+$';
    let e = <KeyboardEvent>event;
    if ([8, 9, 27, 13, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+V
        (e.keyCode == 86 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true)) {// ||
        // Allow: home, end, left, right
        //(e.keyCode >= 35 && e.keyCode <= 39)) {
        // let it happen, don't do anything
        return;
    }

    let ch = String.fromCharCode(e.keyCode);
    let regEx = new RegExp(regexStr);
    if (regEx.test(ch))
        return;
    else
        e.preventDefault();
}

I've added a breakpoint on the first line of this code and it doesnt stop.

The restrictNumberInput function doesn't run when I press any key. Why would this be?

Answer 1

You can achieve this by breaking binding in two pieces as below :

<input mdbActive type="tel" id="phoneNumber" class="form-control" [ngModel]="userdetail.phoneNumber" required (ngModelChange)="restrictNumberInput($event)" (paste)="false"/> {{userdetail.phoneNumber}}