Make reactive validation at angular with formgroup

Question

Make reactive validation at angular with formgroup

Navigation

#1 by (2 votes)

1

I'm trying to put an error message in the template, but I'm not able to get into 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 did not work either.

typescript angular

asked by anonymous 18.12.2018 / 17:46

1 answer

Image change as the form field is chosen Change behavior default chips materialize

score 2 · Accepted Answer

First you do not need compose.

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

Try:

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

Or

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