web-dev-qa-db-fra.com

Angular 4 forme réactive La validation des emails par expression régulière échoue

J'utilise un formulaire réactif pour obtenir les commentaires de l'utilisateur. Non satisfait de la EmailValidator J'utilise un motif. 

emailRegEx = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
this.email = new FormControl('', [Validators.required, Validators.pattern(emailRegEx)]);

Et le HTML: 

<input type="email" formControlName="email" [ngClass]="contactForm.get('email').errors && (contactForm.get('email').dirty || isButtonClicked) ? 'contact-input input-error' : 'contact-input'">

Mais voici la chose, pour une raison quelconque, l'expression régulière accepte 4 caractères après le @, sans point. name@d -> error
name@doma -> pas d'erreur
name@domain. -> error
[email protected] -> pas d'erreur

J'ai vérifié cette expression rationnelle dans plusieurs testeurs en ligne, et ils n'acceptent que le dernier exemple ci-dessus, aucun n'accepte le second. 

MODIFIER:
L’expression régulière convient et fonctionne bien. Le problème est que le validateur de modèle n’analyse pas correctement l’expression rationnelle, ou quelque chose du genre.

javascripthtmlangular
3
AvailableName

Le modèle n'est pas correct en tant que string . En fait, vous êtes dans une ficelle pour pouvoir vous échapper. vous devez utiliser une double barre oblique inversée comme:

emailRegEx = '^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'

Ou si vous voulez éviter de le faire, je suggère d'utiliser:

emailRegEx = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/
5
JEY

Vous pouvez utiliser le package CustomValidator offrant trop de types de validation: https://www.npmjs.com/package/ng2-validation

importer le comme ça: 

import { CustomValidators } from 'ng2-validation';

et utilisez-le dans votre contrôle de formulaire: 

this.email = new FormControl('', [Validators.required, CustomValidators.email]);

Cordialement,

1
Mohamed Ali RACHID
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
    templateUrl: './forgot-password.component.html',
    styleUrls: ['./forgot-password.component.scss']
})
export class ForgotPasswordComponent {

    psResetForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.psResetForm = fb.group({
            'email': [null, Validators.compose([Validators.required, Validators.email])]
        });
    }

    makeRequestToResetLink(formData, valid: boolean) {
        if (valid) {
            alert(formData.email);
        }
    }

}

Votre modèle devrait ressembler à ceci 

<form [formGroup]="psResetForm" (ngSubmit)="makeRequestToResetLink(psResetForm.value,psResetForm.valid)">
    <input type="email" formControlName="email"/>
    <button type="submit">
        submit
    </button>
</form>
0
imal hasaranga perera