Hello I am creating a form in angular with material as follows
<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>
On the typescript side I am representing it through the formGroup object where email I have assigned two validators
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]),
});
The question is how do I verify in the html template when Validators.email or Validators.required is invalid, currently I fully validate the field, but I want to be more specific so that I can tell the user if email is incorrect or if the field is required
<mat-error *ngIf="this.form.controls['email'].invalid">Email invalido</mat-error>
I achieved it by entering the errors object and the validator in question required or email