title: why is custom validator not working
body: <p>I created a custom Validator called <code>threeNumbers</code> what it does is that it accepts only three digit numbers. But when I applied it to the <code>username</code> field it throws an error <code>ERROR TypeError: Cannot read property 'length' of null</code> and
  <code>formGroup expects a FormGroup instance. Please pass one in.</code></p>
  
  <pre><code>  ngOnInit() {
      // form controls validation specicified in the class for the Reactive Forms
      this.courseForm = this.fb.group({
        username: [null, [Validators.required, this.threeNumbers.bind(this)]],
        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]]
      });
      this.dropDownArr = this.dropdown.getData();
      // this.personDetail = {
      //   name: '',
      //   email: '',
      //   address: '',
      //   chosenCourse: ''
      // };
      this.personDetail = this.fieldData.getPersonData();
      console.log(this.courseForm);
    }
  
    threeNumbers(control: FormControl) {
      if (control.value.length &lt; 3 &amp;&amp; typeof control.value !== 'number') {
        return { 'greater than 3 numbers': true };
      }
      return null;
    }
  
  //HTML template
  
  &lt;!-- Form with three inputs and one dropdown which intializes with data from service on intialization and validates with min and maxlength--&gt;
  &lt;section class="container"&gt;
    &lt;!-- ngSubmit calls the function onSubmit on submitting the form  --&gt;
    &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;
      &lt;!-- username input ends here --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputEmail" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;!-- CSS class applied based on validation --&gt;
          &lt;input type="email" class="form-control" id="inputEmail" placeholder="Email" formControlName="email" name="email" [ngClass]="{inValid: !courseForm.get('email').valid &amp;&amp; courseForm.get('email').touched, valid: courseForm.get('email').valid &amp;&amp; courseForm.get('email').touched}"&gt;
          &lt;span class="help-block" *ngIf="!courseForm.get('email').valid &amp;&amp; courseForm.get('email').touched"&gt;Please Enter a valid email&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- email input ends here --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputAddress" class="col-sm-2 control-label"&gt;Address&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="text" class="form-control" id="inputAddress" placeholder="Your Address" formControlName="address" name="address"
            [ngClass]="{inValid: !courseForm.get('address').valid &amp;&amp; courseForm.get('address').touched, valid: courseForm.get('address').valid &amp;&amp; courseForm.get('address').touched}"&gt;
          &lt;!--Display error message on MinLength and MaxLength Validation--&gt;
          &lt;span class="help-block" *ngIf="courseForm.get('address')?.errors?.required &amp;&amp; courseForm.get('address').touched"&gt;Please Enter Your Address&lt;/span&gt;
          &lt;span class="help-block" *ngIf="(courseForm.get('address')?.errors?.minlength?.requiredLength !== courseForm.get('address')?.errors?.minlength?.actualLength) &amp;&amp; courseForm.get('address')?.touched"&gt;Address should be at least 10 characters long&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- address input ends here --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="sel1" class="col-sm-2 control-label"&gt;Choose Course&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;select class="form-control" id="sel1" formControlName="select" [(ngModel)]="selectedOption" name="select" [ngClass]="{inValid: !courseForm.get('select').valid &amp;&amp; courseForm.get('select').touched, valid: courseForm.get('select').valid &amp;&amp; courseForm.get('select').touched}"&gt;
            &lt;option [value]="selectedOption" [disabled]="true"&gt;Choose Your Course&lt;/option&gt;
            &lt;option *ngFor="let data of dropDownArr; index as i"  [ngValue]="data.course"&gt;{{data.course}}&lt;/option&gt;          
          &lt;/select&gt;
          &lt;span class="help-block" *ngIf="!courseForm.get('select').valid &amp;&amp; courseForm.get('select').touched"&gt;Please choose a Course&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- select input ends here --&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="col-sm-offset-2 col-sm-10"&gt;
          &lt;button type="submit" class="btn btn-default" [disabled]=!courseForm.valid&gt;Submit&lt;/button&gt;
          &lt;button type="button" class="btn btn-default" (click)="resetForm(f)"&gt;Reset&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- submit and reset buttons ends here --&gt;
    &lt;/form&gt;
  &lt;/section&gt;
  &lt;!-- section displays the submited form data in the view --&gt;
  &lt;section class="container"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Registered users&lt;/div&gt;
  
      &lt;!-- List group --&gt;
      &lt;ul class="list-group"&gt;
        &lt;li class="list-group-item" *ngFor="let person of personsList"&gt;username:&amp;nbsp;&amp;nbsp;{{person.name}} &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; email:&amp;nbsp;&amp;nbsp;{{person.email}}
          &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Address: &amp;nbsp;&amp;nbsp;{{person.address}} &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
          Course Chosen: &amp;nbsp;&amp;nbsp;{{person.chosenCourse}}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>