не показывать внутриреактивной формы

Question

В моем угловом приложении есть форма для входа в систему. Я пытаюсь отобразить ошибки проверки формы, но они не будут отображаться, если я не разместлю их за пределами <mat-form-field>.

Я пытался добавить ErrorStateMatcher, как объяснено здесь , но это не сработает. Я скопировал и вставил ту же структуру формы, которая работает для меня в других компонентах приложения. Вот оно:

<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>

Вот мой экземпляр формы:

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

    })
  }

Хотя сообщения об ошибках не отображаются, поля становятся красными , когда онинедопустимо (похоже, что и Validators.required, и Validators.email работают).

Я также пытался заставить входы иметь ошибки при отправке, только для целей тестирования, поскольку я не думаю, что этоправильное решение, например:

    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();

Это модули, которые я импортировал в app.module:

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

Чего мне не хватает?