Input accept numbers-only custom directive
<p>I'm trying to create a custom directive in Angular2 so it accepts numbers-only <code>/^\d+$/</code>. So far I have created a directive which is kind of achieves what I need. But...</p>
<p>The Problem:</p>
<blockquote>
<ol>
<li><p>When I try to type inside the <code>&lt;input&gt;</code> tag the character appears for a second and then disappears.</p>
</li>
<li><p>The <code>[(ngModel)]</code> which is bound to the element, updates on typing readily (while typing a number), but when a character is typed 'a || b || c, etc' it get stored in <code>ngModel</code> and gets updated on typing a number.</p>
</li>
<li><p>In this way I cannot go over the <code>&lt;input&gt;</code> characters by arrow keys, as it is bound to <code>keyup</code>.</p>
</li>
</ol>
</blockquote>
<p><strong>Component:</strong></p>
<pre><code>export class AppComponent {
  myValue = 123;
}
</code></pre>
<p><strong>HTML:</strong></p>
<pre><code>&lt;input type=&quot;text&quot; name=&quot;color&quot; [(ngModel)]=&quot;myValue&quot; numbers-only/&gt; &lt;br&gt;
{{myValue}}
</code></pre>
<p><strong>Directive:</strong></p>
<pre><code>@Directive({
  selector: '[numbers-only]', 
    host: {
        '(keyup)' : 'onInputChange()'
    }
})
export class UpperCaseDirective {
  private oldVal = '';
  @Input() ngModel: any;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.oldVal = this.ngModel || '';
  }

  onInputChange() {
    console.log(this.ngModel, !isNaN(this.ngModel));
    var reg = /^\d+$/;
    if (reg.test(this.ngModel)) {      
      this.el.nativeElement.value = this.ngModel;
      this.oldVal = this.ngModel;
    } else {
      this.el.nativeElement.value = this.oldVal;
    }
  }

}
</code></pre>
<p>Coming form a Angular1 background, I find it very hard to write so much code for a simple number only <code>&lt;input&gt;</code>, <code>ng-pattern</code> would do the trick there.</p>
<p>Kindly suggest a way to achieve this OR any other better solution is also welcomed.</p>