title: Angular 2 Email Validator
body: <p>I'm having trouble with my simple email validator. My .ts page that controls my html has this code:</p>
  
  <pre><code>import {EmailValidator} from  '../../validators/email';
  @Component({
    templateUrl: 'build/pages/auth-signup/auth-signup.html',
  })
  
  export class AuthSignupPage {
    constructor(private formBuilder: FormBuilder) {
       this.slideOneForm = new FormGroup({
            firstName: new FormControl('', [
                Validators.maxLength(30), 
                Validators.pattern('[a-zA-Z ]*'),
                Validators.required
                ]),
            lastName: new FormControl('', [
                Validators.maxLength(30), 
                Validators.pattern('[a-zA-Z ]*'), 
                Validators.required]),
            email: new FormControl('', [
                Validators.maxLength(30), 
                EmailValidator.isValidMailFormat, 
                Validators.required]),
            password: new FormControl('', [
                Validators.maxLength(30), 
                Validators.required]),
            confirmPassword: new FormControl('', [
                Validators.maxLength(30), 
                Validators.required])
        });
    }
  }
  </code></pre>
  
  <p>My HTML code is:</p>
  
  <pre><code>  &lt;ion-item&gt;
      &lt;ion-label floating&gt;Email (this will be your login/username)&lt;/ion-label&gt;
      &lt;ion-input #email (change)="elementChanged(email)" formControlName="email" type="email" [class.invalid]="!slideOneForm.controls.email.valid &amp;&amp; (emailChanged || submitAttempt)"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
  </code></pre>
  
  <p>And finally, my email.ts that holds my validator looks like this:</p>
  
  <pre><code>import {Control} from '@angular/common';
  
  
  export class EmailValidator {
  
     static isValidMailFormat(control: Control){
          var EMAIL_REGEXP = /^[a-z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
  
          if (control.value != "" &amp;&amp; (control.value.length &lt;= 5 || !EMAIL_REGEXP.test(control.value))) {
              return { "Please provide a valid email": true };
          }
  
          return null;
      }
  
  }
  </code></pre>
  
  <p>I keep having errors when referencing this validator in my main .ts file. For example, I get this error when hovering over "EmailValidator.isValidMailFormat"</p>
  
  <pre><code>[ts] 
  Argument of type '(ValidatorFn | ((control: Control) =&gt; { "Please provide a valid email": boolean; }))[]' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[]'.
    Type '(ValidatorFn | ((control: Control) =&gt; { "Please provide a valid email": boolean; }))[]' is not assignable to type 'ValidatorFn[]'.
      Type 'ValidatorFn | ((control: Control) =&gt; { "Please provide a valid email": boolean; })' is not assignable to type 'ValidatorFn'.
        Type '(control: Control) =&gt; { "Please provide a valid email": boolean; }' is not assignable to type 'ValidatorFn'.
          Types of parameters 'control' and 'c' are incompatible.
            Type 'AbstractControl' is not assignable to type 'Control'.
              Property 'updateValue' is missing in type 'AbstractControl'.
  import EmailValidator
  </code></pre>
  
  <p>What am I doing wrong?</p>