web-dev-qa-db-fra.com

Pourquoi mon validateur formGroup ne fonctionne-t-il pas comme prévu?

Je réussis à faire des validations de formulaire et à rencontrer un problème si j'utilise un validateur d'e-mail angulaire comme ceci:

<input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">

et le mettre en forme avec formGroup:

<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" >


    <input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">
        <div  class="emailinvalid" *ngIf="emailField.invalid && emailField.touched">
          <span  *ngIf="emailField.hasError('email')">
            Please enter the correct email, this email not valid.
          </span>
        </div>
          <br>
  </form>

de cette façon, la validation des emails ne fonctionne pas, alors je cherche le moyen de le réparer, voici mon code ts:

export class ContactComponent  {


    myForm: FormGroup;
    email: string;
    username: string;
    surname: string;
    message: string;

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      'username':  ['', Validators.required],
      'surname': ['', Validators.required],
      'message': ['', Validators.required],

    });
  }
 }

username, surname et d'autres entrées que j'utilise dans mon formulaire (formGroup) ci-dessus, je viens de le couper pour nettoyer le code un peu dans l'exemple.

angularvalidation
18
shoopik

Vous semblez avoir un étrange mélange de modèle et de forme réactive. Je vous suggère d'utiliser une forme réactive et le validateur intégré email tout en supprimant toute ngModel.

constructor(private fb: FormBuilder) {
  this.myForm = fb.group({
    username:  ['', Validators.required],
    surname: ['', Validators.required],
    message: ['', Validators.required],
    email: ['', Validators.email]
  });
}

et le modèle ressemblerait alors à quelque chose comme ceci:

<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" >  
  <input formControlName="username" >
  <!-- more fields here -->
  <input formControlName="email" >
  <span *ngIf="myForm.hasError('email', 'email') && myForm.get('email').touched">
    Please enter the correct email, this email not valid.
  </span>
</form>

D&EACUTE;MO (juste pour montrer clairement le validateur, j'ai supprimé la touched)

31
AJT_82

Vous pouvez avoir un fichier validator.ts

const pureEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

export const regexValidators = {
  phone: '[\+][0-9() ]{7,}$',
  email: pureEmail,
};

Et utilisez dans vos composants comme:

this.myForm = fb.group({
   'username':  ['', Validators.required],
   'surname': ['', Validators.required],
   'message': ['', Validators.required],
   'email':   ['', [Validators.required,Validators.pattern(this.validators.email)]]    
});
5
Eduardo Vargas
Validators.pattern (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)

Le modèle ci-dessus fonctionne correctement pour moi car Validators.email valide jusqu'à ce que nous entrions un @ .post qui rend le champ valide.

1
Sumanth polaswamy