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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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