Reactive validation at angular with formgroup

Question

I’m trying to put an error message in the template, but I’m not getting to the Validator I created.

This is the Validator:

  criarFormularioDeUsuario() {
    this.formularioLogin = this.fb.group({
      email: ['', Validators.compose([Validators.required, Validators.email])],
      password: ['', Validators.compose([Validators.required])],
    });
  }

In the template I tried:

  <mat-form-field class="full-width">
    <input [errorStateMatcher]="matcher" formControlName="email" matInput placeholder="Email">
    <mat-error *ngIf="formularioLogin.email.errors.email">
        Você precisa entrar com um e-mail válido.
    </mat-error>
  </mat-form-field>

I also tried with hasError:

<mat-error *ngIf="formularioLogin.hasError('email') || formularioLogin.hasError('required')">

It didn’t work either.

Answer 1

First you don’t need the Compose.

this.formularioLogin = this.fb.group({
      email: ['',[Validators.required, Validators.email]],
      password: ['', [Validators.required]],
});

Tries:

<mat-error *ngIf="formularioLogin.get('email').errors">
        {{formularioLogin.get('email').errors|json}} //aqui vc vai ver os erros que estao dando
</mat-error>

Or else

<div *ngIf="formularioLogin.get('email').errors.required">
    Email é requirido.
</div>