0

Hola estoy creando un formulario en angular con material de la siguiente manera

<form class="example-container" [formGroup]="form" #frmPaciente="ngForm" (ngSubmit)="operar()">

    <div [hidden]="true">
        <mat-form-field class="example-full-width">
            <input matInput placeholder="ID" required formControlName="id">
        </mat-form-field>
    </div>

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Nombres" formControlName="nombres">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Apellidos" formControlName="apellidos">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <input matInput placeholder="DNI" formControlName="dni" type="tel">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Dirección" formControlName="direccion">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Teléfono" formControlName="telefono" type="tel">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Email" formControlName="email" type="text">
        <mat-error *ngIf="this.form.controls['email'].invalid">Email invalido</mat-error>
    </mat-form-field>
    <br>
    <button mat-raised-button color="primary" type="submit" [disabled]="frmPaciente.invalid">
      <mat-icon>done</mat-icon>
      <span>Aceptar</span>
    </button>
    <button mat-raised-button color="accent" routerLink='/paciente' type="button">
      <mat-icon>close</mat-icon>
      <span>Cancelar</span>
    </button>
</form>

del lado de typescript estoy representandolo mediante el objeto formGroup en donde email le he asignado dos validadores

this.form = new FormGroup({
      id: new FormControl(0),
      nombres: new FormControl('', Validators.required),
      apellidos: new FormControl('', Validators.required),
      dni: new FormControl('', Validators.required),
      direccion: new FormControl('', Validators.required),
      telefono: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.email, Validators.required]),
    });

la pregunta es como verifico en la plantilla html cuando es invalido Validators.email o Validators.required, actualmente valido por completo el campo, pero quiero ser mas especifico de modo que le pueda decir al usuario si email es incorrecto o es el campo es requerido

<mat-error *ngIf="this.form.controls['email'].invalid">Email invalido</mat-error>

1 respuesta 1

0

Lo logre entrando al objeto errors y al validador en cuestion required o email

<mat-error *ngIf="this.form.controls['email'].errors?.required">Email es requerido</mat-error>
<mat-error *ngIf="this.form.controls['email'].errors?.email">No es un email valido</mat-error>

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.