Angular 2 Email Validator

Je vais avoir des ennuis avec ma simple e-mail validateur. Mon .ts page qui contrôle mon html avec ce 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])
      });
  }
}

Mon code HTML est:

  <ion-item>
    <ion-label floating>Email (this will be your login/username)</ion-label>
    <ion-input #email (change)="elementChanged(email)" formControlName="email" type="email" [class.invalid]="!slideOneForm.controls.email.valid && (emailChanged || submitAttempt)"></ion-input>
  </ion-item>

Et enfin, mon e-mail.ts qui détient mon validateur ressemble à ceci:

import {Control} from '@angular/common';


export class EmailValidator {

   static isValidMailFormat(control: Control){
        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "Please provide a valid email": true };
        }

        return null;
    }

}

Je continue à avoir des erreurs lors de la référence à ce validateur dans ma main .fichier ts. Par exemple, j'obtiens cette erreur quand le curseur est sur "EmailValidator.isValidMailFormat"

[ts] 
Argument of type '(ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; }))[]' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[]'.
  Type '(ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; }))[]' is not assignable to type 'ValidatorFn[]'.
    Type 'ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; })' is not assignable to type 'ValidatorFn'.
      Type '(control: Control) => { "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

Ce que je fais mal?

source d'informationauteur Will

angular typescript

13

Encore mieux, maintenant, Angulaire 4 a programme de validation d'email intégré
https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6
https://github.com/angular/angular/pull/13709

Juste ajouter e-mail à la balise. Par exemple,
```
  <form #f="ngForm">
    <input type="email" ngModel name="email" required email>
    <button [disabled]="!f.valid">Submit</button>
    <p>Form State: {{f.valid?'VALID':'INVALID'}}</p>
  </form>
```

Cela a été résolu en changeant la classe importée de Control à FormControl dans la première ligne de mon programme de validation.ts:

import {FormControl} from '@angular/forms';


export class EmailValidator {

   static isValidMailFormat(control: FormControl){
        let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "Please provide a valid email": true };
        }

        return null;
    }

}

3
```
<input type="email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$">
```
Le modèle de l'attribut peut être utilisé pour la validation personnalisée

Suffit d'utiliser la validator.pattern('^[^\s@]+@[^\s@]+\.[^\s@]{2,}$')

.ts code:

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { UserDetails } from '../../app/Model/UserDetails';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'  
})
export class LoginPage {
logForm: FormGroup;
  email: string;
  constructor(public navCtrl: NavController,public formBuilder: FormBuilder) {
    this.logForm = formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[^\s@]+@[^\s@]+\.[^\s@]{2,}$'), Validators.minLength(1)])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],

    });
  }


  onSubmit(value: any): void {
    if (this.logForm.valid) {
      //window.localStorage.setItem('username', value.username);
      //window.localStorage.setItem('password', value.password);    
    }
  }


}

Code HTML:

    <form [formGroup]="logForm" (ngSubmit)="onSubmit(logForm.value)">
      <div class="login-user-input">

        <ion-item>
          <ion-label class="label"  fixed>Email</ion-label>
          <ion-input type="text" formControlName="email" [(ngModel)]="user.Email" ></ion-input>
        </ion-item>
        <ion-item *ngIf="logForm.controls.email.hasError('pattern') && logForm.controls.email.touched">
          <p>Please enter valid Email</p>
        </ion-item>
        <ion-item>
          <ion-label class="label"  fixed>Password</ion-label>
          <ion-input type="password" formControlName="password" maxlength="8" [(ngModel)]="user.password"></ion-input>
        </ion-item>
        <ion-item *ngIf="logForm.controls.password.hasError('minLength') && logForm.controls.password.touched">
          <p>Please enter valid Password</p>
        </ion-item>
      </div>
      <div>
        <button text-center class="customersubmitbtn" [disabled]="!logForm.valid" color="primary" >Login</button>
      </div>
    </form>

Vous devez vous connecter pour publier un commentaire.