0
229
Vistasvalidando la entrada de correo electrónico en angular - validación de patrón
Estoy usando un patrón basado en plantillas para verificar si la entrada es un correo electrónico válido y usa un error de mat para mostrarlo, pero de alguna manera no funciona y realmente no entiendo por qué, como puede ver en mi código a continuación, no creo que todavía haya otra forma de hazlo, ¿alguna idea de por qué funciona, muchachos? Gracias.
cualquiera que sea la entrada, siempre está en rojo, incluso el formato del correo electrónico es correcto, ¿por qué?
#Correo electrónico
<mat-form-field appearance="fill" fxFlex="30"> <mat-label>EMAIL ADDRESS</mat-label> <input matInput type="email" pattern="^[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$" [(ngModel)]="model.email" maxLength="100" #email="ngModel" required [readonly]="odel.assetStatus === 'Done'"> <mat-error *ngIf="!model.email ">Inspector email is required.</mat-error> <mat-error *ngIf="email.errors?.maxLength">Max length is 100.</mat-error> <mat-error *ngIf="(email.errors && (email.invalid || email.touched))">InvalidEmail.</mat-error> </mat-form-field>2 Respuestas
Responde la pregunta0
¿Por qué no usas el EmailValidator de angular?
<input matInput type="email" email [(ngModel)]="model.email"Si realmente quieres una expresión regular personalizada, tal vezesto te ayude
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/Ahora lo que está mal con su expresión regular:
^[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$ Lo hiciste para que pueda tener solo una letra, que un espacio, que @ , que otra letra, que un espacio, que un punto y 2 o 3 letras. Así que solo pasará algo así : t @t .com
El problema es con los espacios (después de @ y antes de . ), deberías poner un + en su lugar y todo funcionaría:
^[a-zA-Z0-9._% -]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$0
Obtuve de este artículo https://www.abstractapi.com/guides/angular-email-validation , si desea usar la expresión regular para el correo electrónico de validación en el formulario basado en plantilla, puede probar este patrón ^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[az]{2,4}$