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