如何使用指令仅允许在输入类型“ tel”中输入数字（0-9）-Ionic 3 Angular 5

Question

I'm trying to make a custom directive which will allow only digits to be entered in input type= 'tel' . Well in Ionic 1 (angular1) I used directive as follows which worked efficiently

.directive('onlyDigits', function() {
  return {
      restrict: 'A',
      require: '?ngModel',
      link: function(scope, element, attrs, modelCtrl) {
          modelCtrl.$parsers.push(function(inputValue) {
            if (inputValue == undefined) return '';
            var transformedInput = inputValue.replace(/[^0-9]/g, '');
            if (transformedInput !== inputValue) {
              modelCtrl.$setViewValue(transformedInput);
              modelCtrl.$render();
            }
            return transformedInput;
          });
      }
  };
})

Now in Ionic 3(angular5), I'm trying to recreate the same directive with following code.

import { Directive, ElementRef, Output, Renderer, HostListener, EventEmitter } from '@angular/core';
@Directive({ selector: '[onlyDigits]' })
export class DigitsDirective {
    constructor(public elementRef: ElementRef, public renderer: Renderer) {}

    @Output() onlyDigits = new EventEmitter();

    @HostListener("keyup", ["$event.target.value"])
    onKeyup(value) {
        if (value == undefined) return '';
        var transformedInput = value.replace(/[^0-9]/g, '');
        if (transformedInput !== value) {
          this.onlyDigits.emit(transformedInput);
        }
    }
} 

This kinda works, but there is one problem. Because of keyup event it first adds the non-digit letter to input type then removes it. In above ionic 1 directive if we press non-digit value, it doesn't let that value get inside the input type but in Ionic 3 first, the value is added in input type than it is removed which I don't want! how to achieve this feat?

Answer 1

Created a custom directive which will allow only digits. (For Ionic 3) This solution worked for me. Please try below code.

     import { Directive, ElementRef, HostListener, Output, EventEmitter } 
     from '@angular/core';

     @Directive({
     selector: '[onlyDigits]' // Attribute selector
     })
     export class OnlyDigitsDirective {

     constructor(private _el: ElementRef) {
     console.log('Hello OnlyDigitsDirective Directive');
     }
     @Output() onlyDigits = new EventEmitter();

     @HostListener('keydown', ['$event']) onKeyDown(event) {
     let e = <KeyboardEvent>event;

     if (e.key == "0" || e.key == "1" || e.key == "2" || e.key == "3" || 
         e.key == "4" || e.key == "5" || e.key == "6" || e.key == "7" || 
         e.key == "8" || e.key == "9" || e.key == "Backspace") {
         // Do Nothing
         console.log("e.key: " + e.key);
         } else {
         // does not allow 
           e.preventDefault();
          }

        }


      }

Answer 2

I don't know if you want another way but I solved this with jquery.

npm install -g typings typings install dt~jquery --global --save

jquery solution:

 $('#YOUR_ID').on('textInput', e => {    
    var keyCode = e.originalEvent.data.charCodeAt(0);                       
    if(!(keyCode>64 && keyCode<91) && !(keyCode>96 && keyCode<123) && !(keyCode>127 && keyCode<166) ){
      e.preventDefault();
    }
  });

Answer 3

Oh no, nonono @berk-akkerman, don't use jquery with Angular! DO NOT DO THAT! I strictly forbid you!

Here's one simple way using NgModel, but bear in mind that validators would probably give you a better UX, ie. let user input whatever, but show an error msg if the field is invalid, and don't let them submit.

Component

data = {numberValue: 0};
ensureNumber(val:any) {
    return (''+val).replace(/[^0-9]/g, '');
}

Template

<input type="number" [ngModel]="data.numberValue"
 (ngModelChange)="data.numberValue=ensureNumber($event)"/>