title: Input type number "only numeric value" validation
body: <p>How can I validate an input of <code>type="number"</code> to only be valid if the value is numeric or null using only Reactive Forms <em>(no directives)</em>?<br>
  Only numbers <code>[0-9]</code> and . are allowed, no "e" or any other characters.</p>
  
  <hr>
  
  <p><strong>What I've tried so far:</strong></p>
  
  <h3>Template:</h3>
  
  <pre><code>&lt;form [formGroup]="form" novalidate&gt;
      &lt;input type="number" formControlName="number" id="number"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h3>Component:</h3>
  
  <pre><code>export class App {
    form: FormGroup = new FormGroup({});
  
    constructor(
      private fb: FormBuilder,
    ) {
      this.form = fb.group({
        number: ['', [CustomValidator.numeric]]
      })
    }
  }
  </code></pre>
  
  <h3>CustomValidator:</h3>
  
  <pre><code>export class CustomValidator{
    // Number only validation
    static numeric(control: AbstractControl) {
      let val = control.value;
  
      if (val === null || val === '') return null;
  
      if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };
  
      return null;
    }
  }
  </code></pre>
  
  <h2><a href="https://plnkr.co/edit/qLWM8rcrxzAMV3P17MAy?p=preview" rel="noreferrer">Plunker</a></h2>
  
  <p>The problem is when a user enters something that is not a number <em>("123e" or "abc")</em> the FormControl's value becomes <code>null</code>, keep in mind I don't want the field to be required so if the field really is empty <code>null</code> value should be valid.<br></p>
  
  <blockquote>
    <p>Cross browser support is also important (Chrome's number input fields do not allow the user to input letters - except "e", but FireFox and Safari do).</p>
  </blockquote>