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.