title: restrict input field to numbers only using custom validator angular 2
body: <p>I researched a lot to find solution to this but none of the stakoverflow question has an accepted answer. So ive done my research and couldnt find an answer.</p>
  
  <p>What I want the custom validator to do it that it should only take numbers as input and only three digit numbers like, 838, 892,183,234.. so on</p>
  
  <p>Rightnow it accepts characters as well.</p>
  
  <pre><code>  threeNumbers(control: FormControl) {
      if (control.value &amp;&amp; !/[0-9\+\-\ ]/.test(control.value) &amp;&amp; control.value.length &lt; 3) {
        return { 'greater than 3 numbers': true };
      }
      return null;
    }
  
  }
  
  this.courseForm = this.fb.group({
    username: [null, [Validators.required, this.threeNumbers, Validators.maxLength(3)]],
    email: [null, [Validators.required, Validators.pattern('([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\\.([a-zA-Z]{2,5})')]],
    address: [null, [Validators.required, Validators.minLength(10), Validators.maxLength(100)]],
    select: [null, [Validators.required]]
  });
  </code></pre>
  
  <p>// html template</p>
  
  <pre><code>  &lt;form class="form-horizontal" (ngSubmit)='onSubmit()' [formGroup]='courseForm'&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputUsername" class="col-sm-2 control-label"&gt;Username&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="text" class="form-control" id="inputUsername" placeholder="Username" formControlName="username" name="name"
            [ngClass]="{inValid: !courseForm.get('username').valid &amp;&amp; courseForm.get('username').touched, valid: courseForm.get('username').valid &amp;&amp; courseForm.get('username').touched}"&gt;
          &lt;span class="help-block" *ngIf="!courseForm.get('username').valid &amp;&amp; courseForm.get('username').touched"&gt;Please enter a valid username&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>