title: Ionic 4 ion-input allow number only, restrict alphabet and special character
body: <p>I am creating an app in ionic4, I have a functionality where user can enter the only integer number (0-9), so I want to restrict any other character i.e alphabets, dot, plus everything.<br>
  I tried to restrict is using the following directive</p>
  
  <pre><code> @HostListener('input', ['$event']) onInputChange(event) {
      this.inputElement = this._el.nativeElement.getElementsByTagName('input')[0];
      const initalValue = this.inputElement.value;
      this.inputElement.value = initalValue.replace(/[^0-9]*/g, '');
      if (initalValue !== this.inputElement.value) {
         event.stopPropagation();
      }
  }
  </code></pre>
  
  <p>It is updating ngModel correctly but still, an invalid character is visible in the input field.</p>
  
  <p>I tried another option as following</p>
  
  <blockquote>
    <p>html</p>
  </blockquote>
  
  <pre><code>&lt;ion-input type="text" placeholder="Enter number"
          [(ngModel)]="userCount" 
          name="userCount" 
          (ionInput)="countChange($event)"&gt;
   &lt;/ion-input&gt;
   Usercount: {{userCount}}
  </code></pre>
  
  <blockquote>
    <p>Typescript</p>
  </blockquote>
  
  <pre><code>countChange(event) {
      event.target.value = event.target.value.replace(/[^0-9]*/g, '');
  }
  </code></pre>
  
  <p>With above its printing value in HTML correct without invalid character, but its showing invalid character in input.<br></p>
  
  <p>If I enter 5+ in input, the value in ngModel shows 5 but input field showing 5+</p>
  
  <p>When I type 5++ and then type 5 again, input field shows 55 now.</p>
  
  <p>How can I restrict input to accept only integer values [0-9]</p>