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