Entrar Ainda não tem acesso?
1
resposta

Mensagem de validacao

Referente ao curso Angular parte 2: Autenticação, Forms e lazy loading, no capítulo O componente para login e atividade Validação de formulários

por Adriana Reigadas
| 189.5k xp | 20 posts

Ola, minha mensagem "Username Required" ja aparece quando eu carrego o form... como fazer aparecer somente no submit? Estou usando Angular Material.

    <mat-card-header>
      <mat-card-title>Login</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form [formGroup]="loginForm">
        <p>
          <mat-form-field appearance="fill"  class="full-width">
            <mat-label>Username</mat-label>
            <input matInput formControlName="username" placeholder="username" name="username" autofocus>
            <mat-hint class="hint-error" *ngIf="loginForm.get('username').errors?.required">Username required</mat-hint>
          </mat-form-field>
        </p>
        <p>
          <mat-form-field appearance="fill"  class="full-width">
            <mat-label>Password</mat-label>
            <input matInput formControlName="password" placeholder="password" name="password" type="password">
            <mat-hint class="hint-error" *ngIf="loginForm.get('password').errors?.required">Password required</mat-hint>
          </mat-form-field>
        </p>
      </form>
    </mat-card-content>
    <mat-card-actions>
      <button [disabled]="loginForm.invalid" mat-raised-button (click)="login()">Login</button>
    </mat-card-actions>
</mat-card>
1 resposta
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Adriana, tudo bem? Para mostrar apenas no submit você pode utilizar o markAsTouched:

ngOnInit(): void {
    this.myForm = this.formBuilder.group({
        name: ['', Validators.required]
    })
}

public save() {
    this.myForm.get('name').markAsTouched()
}

E no template:

<form [formGroup]="myForm" (submit)="save()">
    <input formControlName="name"/>
    <span *ngIf="myForm.get('name').touched && myForm.get('name').errors?.required">Required field</span>
    <button type="submit">Save</button>
  </form>

A ideia é marcar o campo como tocado ao chamar a função de sua submissão.

Espero ter ajudado.