no se muestra fuera de


Tengo un formulario en mi app de angular para el login. Estoy intentando mostrar errores de validación, pero no se muestran a menos que los coloque fuera de <mat-form-field>.

He intentado añadir un ErrorStateMatcher como indica aquí, pero no funciona. He copiado la misma estructura que utilizo en otros componentes de la aplicación. Es esta:

<form [formGroup]="loginForm" #formDir="ngForm">     <mat-form-field>         <input [errorStateMatcher]="matcher" autocomplete="off" matInput placeholder="Email"             formControlName="username" name="username">         <mat-icon matSuffix>alternate_email</mat-icon>         <mat-error *ngIf="loginForm.controls['username'].hasError('required')">             * This field is required         </mat-error>     </mat-form-field>      <mat-form-field>         <input [errorStateMatcher]="matcher" autocomplete="off" matInput placeholder="Password"             formControlName="password" type="password" name="password" autocomplete>         <mat-icon matSuffix>vpn_key</mat-icon>         <mat-error *ngIf="loginForm.controls['password'].hasError('required')">             * this field is required         </mat-error>     </mat-form-field> </form> 

Aquí esta la instancia del formulario:

constructor(private router: Router,     private fb: FormBuilder) {     this.loginForm = fb.group({       username: new FormControl('', [Validators.required, Validators.email]),       password: new FormControl('', [Validators.required])      })   } 

Aunque los mensajes de error no aparecen, los campos se vuelven rojos cuando no son válidos (tanto Validators.required como Validators.email parece que funcionan correctamente).

También he intentado forzar los inputs para que tengan errores al hacer submit, solamente con el propósito de testear, ya que no creo que sea una solución adecuada:

this.loginForm.controls['username'].setErrors({   required: true }) this.loginForm.controls['password'].setErrors({   required: true }) this.loginForm.markAllAsTouched(); this.loginForm.controls['username'].markAsTouched(); this.loginForm.controls['password'].markAsTouched(); 

Estos son los módulos que he importado en app.module:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';