title: angular 4 custom validator is not working
body: <p>i'm working on angular 4 and created a custom validator for cgpa validation (if the cgpa is less tahn 2.0 or greater than 4.0) in the component.ts file but its not triggering but the predefined Validators.required is working properly.</p>
  
  <p>Cgpa Validator:</p>
  
  <pre><code> function ValidCgpa(cgpa: FormControl): {[s: string]: boolean}  {
    let num = Number(cgpa);
  
    if(num &lt; 2.0 || num &gt; 4.0)  {
      return {invalidCgpa: true};
    }
   }
  </code></pre>
  
  <p>Custom Cgpa Validator Calling</p>
  
  <pre><code>this.educationalDetailsForm = new FormGroup({
    cgpa: new FormControl('', Validators.compose([Validators.required, ValidCgpa]))
  });
  </code></pre>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;input type="text" formControlName="cgpa" placeholder="CGPA"&gt;
  
  &lt;div *ngIf="educationalDetailsForm.hasError('ValidCgpa','cgpa') &amp;&amp; educationalDetailsForm.get('cgpa').touched"&gt;
     CGPA must be greater than 2.0 and less than 4.0
  &lt;/div&gt;
  </code></pre>