Angular 2 Email Validator
<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>