2

Estoy trabajando en el Front de una aplicación en Angular 4. Consta de un de "prime-ng" que carga los datos de los usuarios (Permitiendo añadir, modificar y eliminar) y querría verificar que el email introducido tiene un formato valido, y que de lo contrario no permita guardar y lance una alerta al usuario.

Esto hasta ahora ya lo estoy haciendo para los campos vacíos etc. De primeras, en el formulario se marca en rojo cuando algún dato es incorrecto (o el campo obligatorio esta vacío). Luego, por si el usuario se salta la advertencia, en la lógica del botón de guardar, verifico que en la lista de usuarios, por cada usuario, los campos tienen el formato deseado y de lo contrario el proceso se para lanzando una advertencia evitando así que se guarden datos incorrectamente.

estructura .html (Resumido):

p-table #dt [columns]="cols" [value]="usuarios" selectionMode="single"
        [(selection)]="usuarioSeleccionado"
        [responsive]="true"
        [metaKeySelection]="true"
        csvSeparator=";"
        [scrollable]="true"
        >
   <ng-template pTemplate="body" let-rowData let-columns="columns">
     <tr [pSelectableRow]="rowData" [pContextMenuRow]="rowData" *ngIf="!rowData.Borrado" style="word-wrap: break-word">
         <td *ngIf="rowData.IdUsuario != 0">
      {{ rowData.Username }}
         </td>
         <td pEditableColumn *ngIf="rowData.IdUsuario == 0" [ngClass]="{'invalidRecord': rowData.Username == ''}">
            <p-cellEditor>
               <ng-template pTemplate="input">
                   <input type="text" pInputText (focus)="focusFunction(rowData)" [(ngModel)]="rowData.Username" name="username" maxlength="10">
               </ng-template>
               <ng-template pTemplate="output">
          {{ rowData.Username }}
               </ng-template>
            </p-cellEditor>
        </td>

        <td *ngIf="rowData.IdUsuario != 0 && !permisos[accionesPermisos.MODIFICAR]">
      {{ rowData.Email }}
        </td>
        <td pEditableColumn *ngIf="rowData.IdUsuario == 0 || permisos[accionesPermisos.MODIFICAR]" [ngClass]="{'invalidRecord': rowData.Email == null || rowData.Email == ''}">
            <p-cellEditor>
                <ng-template pTemplate="input">
          <input type="text" pInputText (focus)="focusFunction(rowData)" [(ngModel)]="rowData.Email" name="email" maxlength="100">
                </ng-template>
                <ng-template pTemplate="output">
          {{ rowData.Email }}
                </ng-template>
            </p-cellEditor>
    </td>

Función de validacion en .ts (Resumida):

validarDatos(){
    let esValido:boolean = true;
    let mensaje:string = "";

    for(let usuario of this.usuarios){
        if(usuario.Username == null || usuario.Username == undefined || usuario.Username.trim() == ""){
            mensaje = "Usuario Vacio";
            esValido = false;
            break;
         }
}

        if(usuario.Email == null || usuario.Email == undefined || usuario.Email.trim() == ""){
            mensaje = "email vacio";
            esValido = false;
            break;
    }

Mi duda es:

Así como puedo validar que if(usuario.nombre != null) , ¿como puedo validar que usuario.email tiene un formato de email valido?

Repito que me interesa hacer una condición en la lógica (NO en el template).

un saludo y muchas gracias de antemano

1
  • Buenas Excali 2, bienvenido a StackOverflow en Español. Revisate Cómo preguntar para saber como formular una buena pregunta. Te recomiendo tambien hacer el recorrido de bienvenida para que así ganes tu primera medalla!
    – Marc
    Commented el 24 may. 2019 a las 6:18

1 respuesta 1

1

He conseguido solucionarlo,

básicamente he creado una librería de validaciones donde he creado la Funcion EsEmailValido() que devuelve true si es un email valido y false si no lo es.

import { Injectable }    from '@angular/core';

@Injectable()
export class ValidatorService {

  esEmailValido(email: string):boolean {
    let mailValido = false;
      'use strict';

      var EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

      if (email.match(EMAIL_REGEX)){
        mailValido = true;
      }
    return mailValido;
  }
}

y en validarDatos():

validarDatos(){

    let esValido:boolean = true;
    let mensaje:string = "";

    for(let usuario of this.usuarios){
        if(usuario.Username == null || usuario.Username == undefined || usuario.Username.trim() == ""){
            mensaje = "Usuario Vacio";
            esValido = false;
            break;
        }

        if(usuario.Email == null || usuario.Email == undefined || usuario.Email.trim() == ""){
            mensaje = "Email vacio";
            esValido = false;
            break;
        }
        if(!this._validatorService.esEmailValido(usuario.Email)){
            mensaje = "Formato Email Incorrecto";
            esValido = false;
            break;
        }

}

1
  • Supongo que si estás usando Angular 4 el proyecto tiene ya un tiempo y no puedes migrarlo, pero si quieres la lógica en el código del componente deberías usar formularios reactivos. En cualquier caso puedes crear una directiva para validar, como en este ejemplo Commented el 24 may. 2019 a las 8:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.