such - reactive forms angular 6

¿Por qué mi validador de formGroup no funciona como se esperaba?

Question

Estoy intentando realizar validaciones de formularios y encontrar algún problema, si uso un validador de correo electrónico angular como este:

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

y ponerlo en forma por 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 esa manera, la validación de correo electrónico no funciona, así que estoy buscando la forma de solucionarlo. Aquí está mi código 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 y otras entradas que uso en mi formulario (formGroup) anterior, simplemente lo corté para limpiar el código un poco en el ejemplo.

Answer 1

Parece que tienes una mezcla extraña de plantilla y forma reactiva. Le sugiero que utilice un formulario reactivo y el email validador incorporado y, al mismo tiempo, elimine cualquier ngModel .

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

y la plantilla se vería así:

<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>

DEMO (solo para mostrar claramente el validador, he quitado el touched )

Answer 2

Puedes tener un archivo 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,
};

Y usar en tus componentes como:

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

Answer 3

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,}))$/)

El patrón anterior funciona bien para mí, ya que Validators.email valida hasta que ingresamos a @ .post que hace que el campo sea válido.