Angular2 Javascript Validating Input number not character
<p>Link to full project (without nodes_modules) 
<a href="https://www.dropbox.com/s/4qd8x97ih1f1nho/workinghw4zipped%20%281%29.zip?dl=0" rel="nofollow">https://www.dropbox.com/s/4qd8x97ih1f1nho/workinghw4zipped%20%281%29.zip?dl=0</a></p>

<p>Note: Once you run it, everything about this problem is within the "Edit All" part of the website, click on that to access the table</p>

<p>The purpose of this part of the website is to have the users enter a name and price for each row in the table. </p>

<p>If the user enters a character (not a number) inside price box, then there has to be a "invalid input" message somewhere which updates itself as the user is typing it.</p>

<p>What should I add or change in the code that will allow the user to have an "invalid input" message when entering a character (not a number) into the price box?</p>

<p>The html file:</p>

<pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
&lt;h2&gt;My Heroes&lt;/h2&gt;

&lt;form [ngFormModel]="myForm" class="ui form"&gt;
&lt;table *ngFor="#hero of heroes"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt; ID &lt;/th&gt;
      &lt;th&gt; Hero Name&lt;/th&gt;
      &lt;th&gt; Price &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
        &lt;td id="id"&gt;&lt;label&gt;{{hero.id}}&lt;/label&gt;&lt;/td&gt;
        &lt;td id="name"&gt;&lt;input type = "String" [(ngModel)]="hero.name" placeholder="Pristine name" /&gt;&lt;/td&gt;
        &lt;div class="field"&gt;
        &lt;td id="price"&gt;
          &lt;input type = "number" 
          [(ngModel)]="hero.price"
           placeholder="Pristine Price" 
          [ngFormControl]="myForm.find('price')"
          /&gt;Input Pristine&lt;/td&gt;
           &lt;/div&gt;



   &lt;div *ngIf="!sku.control.valid"  
         class="ui error message "&gt;Price can only be an integer.&lt;/div&gt;  
       &lt;div *ngIf="sku.control.hasError()"  
         class="ui error message"&gt;Input is invalid&lt;/div&gt;  
    &lt;div *ngIf="!myForm.valid"  
      class="ui error message"&gt;Not pristine.&lt;/div&gt;

&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/form&gt;
</code></pre>

<p>The .ts file:</p>

<pre><code>import {Component, OnInit} from 'angular2/core';
import {
  FORM_DIRECTIVES,
  FormBuilder,
  Control, ControlGroup,
  Validators
} from 'angular2/common';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';



@Component({
  selector: 'SpreadSheetComponent',
  templateUrl: 'app/spreadsheeteditall.component.html',
  styleUrls: ['app/spreadsheeteditall.component.css'],
  providers: [HeroService],
})



export class SpreadSheetComponent {
  myForm: ControlGroup;
  price;

  onSubmit(value: string): void {
    console.log('you submitted value: ', value);
  }  
  heroes: Hero[];
  selectedHero: Hero;

  constructor(fb: FormBuilder, private _heroService: HeroService, private _router: Router) { 
        function skuValidator(control: Control) : { [s: string]: boolean } {
      if (!control.value.match(/[0-9][0-9]*(\.[0-9][0-9])?$/)) {
        return { invalidSku: true };
      }
    };
    this.myForm = fb.group({
      'sku': ['', Validators.compose([
        Validators.required, skuValidator])]
    });
 this.price = this.myForm.controls['sku'];
  }

  getHeroes() {
    this._heroService.getHeroes().then(heroes =&gt; this.heroes = heroes);
  }

  gotoDetail() {
    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
  }

  ngOnInit() {
    this.getHeroes();
  }

  onSelect(hero: Hero) { this.selectedHero = hero; }
}
</code></pre>