title: Angular 2 custom validation for numbers and decimal values
body: <p>I have a custom validator that checks if an input field has a number entered into it. 
  <a href="https://i.stack.imgur.com/K0J6Q.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/K0J6Q.jpg" alt="enter image description here"></a></p>
  
  <p>The code looks like so:</p>
  
  <pre><code>import { AbstractControl, ValidatorFn } from '@angular/forms';
  
  export class NumberValidators {
  
    static isNumberCheck(): ValidatorFn {
      return  (c: AbstractControl): {[key: string]: boolean} | null =&gt; {
        if (c.value !== undefined &amp;&amp; (isNaN(c.value))) {
          return { 'value': true };
        }
  
        return null;
      };
    }
  }
  </code></pre>
  
  <p>But the issue I have is when I enter a decimal value it is raising the validation flag which I dont want. I want the input field to have whole numbers and decimal numbers. Can somebody please help me get this correct.</p>
  
  <p>Below is my template code using parsleyjs for validation</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group row"&gt;
                &lt;label for="upperbeltposition" class="col-md-6 col-form-label"&gt;Upper Belt Position (mm) &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                &lt;div class="col-md-5"&gt;
                  &lt;input class="form-control input-transparent " id="upperbeltposition" type="text" formControlName="upperbeltposition"  data-parsley-trigger="blur"
                    required="required" data-parsley-type="number"/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
               &lt;div class="form-group row"&gt;
                &lt;label for="platformxposition" class="col-md-6 col-form-label"&gt;Platform X Position (mm) &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                &lt;div class="col-md-5"&gt;
                  &lt;input class="form-control input-transparent " id="platformxposition" type="text" formControlName="platformxposition"  data-parsley-trigger="blur"
                    required="required" data-parsley-type="number"/&gt;
                &lt;/div&gt;
              &lt;/div&gt;
               &lt;div class="form-group row"&gt;
                &lt;label for="platformyposition" class="col-md-6 col-form-label"&gt;Platform Y Position (mm) &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                &lt;div class="col-md-5"&gt;
                  &lt;input class="form-control input-transparent " id="platformyposition" type="text" formControlName="platformyposition"  data-parsley-trigger="blur"
                    required="required" data-parsley-type="number"/&gt;
                &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and in my Component I am using Reactive form and below is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>upperbeltposition: ['', [Validators.required, NumberValidators.isNumberCheck]],
  platformxposition: ['', [Validators.required, NumberValidators.isNumberCheck]],
  platformyposition: ['', [Validators.required, NumberValidators.isNumberCheck]]</code></pre>
  </div>
  </div>
  </p>
  
  <p>thanks!!</p>