reactivos - Validación de correo electrónico Angular2

validar formulario angular 5

Question

Soy nuevo en el aprendizaje de Angular2, y quiero hacer un formulario de validación que verifique los correos electrónicos después de un patrón RegEx.

Mi código se ve más o menos así, pero no tengo idea si lo estoy haciendo bien, o lo que hice mal, ¿alguien puede ayudarme un poco?

¡Gracias!

Lo arreglé. Muchas gracias a todos.

<div class="alert-email">
<label for="contactemail">EMAIL: </label>
<input type="email" id="contactemail" name="contactemail"
required ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:/.[a-zA-Z0-9-]+)*$/"
[(ngModel)]="model.contactemail" #contactemail="ngModel"
placeholder="Your email" /><br><br>
<div *ngIf="contactemail.errors && (contactemail.dirty || contactemail.touched)" class="alert-email alert-danger-email"><br>
<div [hidden]="!contactname.errors.required">
Email is required
</div>
<div [hidden]="!contactname.errors">
Please input a valid email.
</div>
</div>
</div>

Answer 1

Prueba algo así

<div class="alert-email">
<label>Email</label>
<input
id="contactemail"
type="text"
#contactemail="ngModel"
[(ngModel)]="model.contactemail"
required
pattern="^/w+([/.-]?/w+)*@/w+([/.-]?/w+)*(/./w{2,3})+$">
<div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">
<div *ngIf="contactemail.errors && contactemail.errors.required">
Email is required
</div>
<div *ngIf="contactemail.errors && contactemail.errors.pattern">
Email is invalid
</div>
</div>
</div>

Answer 2

Angular 4 tiene una etiqueta de validación de "correo electrónico" incorporada que se puede agregar dentro de la entrada. P.ej:

<input type="email" id="contactemail" email>

Esto será válido para una serie de números y letras, luego una @ y luego otra serie de letras. No representará el punto después de @ - para eso puede usar la etiqueta "patrón" dentro de la entrada y su expresión regular estándar.

Answer 3

Validación de correo electrónico angular 4:

• Use el correo electrónico a su entrada
• Si desea .com para el uso del correo electrónico patrón patrón = "[a-zA-Z0-9.-_] {1,} @ [a-zA-Z .-] {2,} [.] {1} [a -zA-Z] {2,}

Final:

`<input type="email" [(ngModel)]="enterEmail" name="myEmail" #myEmail="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>`