1
this.loginForm = formBuilder.group({
    'login': [null, Validators.required],
    'senha': [null, Validators.required],
    'estabelecimento': [null, Validators.required],
});

Aqui tenho meus Validators

<form class="inputsLogin" name="form" [formGroup]="loginForm" novalidate>
    <div class="input-group mb-3">
        <select [(ngModel)]="estabelecimento" required formControlName="estabelecimento" class="form-control" name="estabelecimentos" id="estabelecimentos" placeholder="Estabelecimento">
            <option value=""></option>
            <option *ngFor="let estabelecimento of estabelecimentos" [ngValue]="estabelecimento">
                {{estabelecimento.NOME}}
            </option>
        </select>
    </div>
    <div *ngIf="!loginForm.controls.estabelecimento.valid" class="invalid-feedback">Estabelecimento invalido</div>
    <div class="form-group">
        <label for="usuario">Usuário</label>
        <input type="text" class="form-control" name="usuario" [(ngModel)]="model.usuario"required formControlName="login"/>
        <div *ngIf="!loginForm.controls.login.valid" class="invalid-feedback">Login invalido</div>
    </div>
    <div class="form-group">
        <label for="senha">Senha</label>
        <input type="password" class="form-control" name="senha" [(ngModel)]="model.senha" required formControlName="senha"/>
        <div *ngIf="!loginForm.controls.senha.valid" class="invalid-feedback">Senha invalida</div>
    </div>
    <div *ngIf="mensagem" class="invalid-feedback">{{mensagem}}</div>
    <div class="form-group">
        <button (click)="logar()" [disabled]="loading || !loginForm.valid" class="btn btn-info">Login</button>
    </div>
</form>

E aqui meu formulário, a funcionalidade esta certa a unica coisa é que quando carrego a pagina as mensagens de erro já ficam aparecendo. Gostaria que ao carregar a pagina nenhuma mensagem aparecesse e o botão ficasse desabilitado e apenas quando o usuário clicar ou digitar que meus Validators irão entrar em ação mostrando as mensagens de erros.

1
  • Você precisa declarar as variáveis, mesmo que vazias. Já fez isso? 26/02/2018 às 12:25

2 Respostas 2

1

Quando você usa o

   <div *ngIf="!loginForm.controls.login.valid" class="invalid-feedback">Login invalido</div>

Você está pedindo pra exibir se o formulário estiver inválido ... por isso está aparecendo logo no início, você precisar pegar o erro do input

<div *ngIf="loginForm.get('usuario').errors.required && (loginForm.get('usuario').touch || loginForm.get('usuario').dirty)" class="invalid-feedback">Login invalido
</div>
0

Complementando a resposta do Herbert Junior, vou deixar um exemplo de como fica no HTML:

<a (click)="goBack()" class="btn btn-warning btn-md m-3">
  <span class="glyphicon glyphicon-backward"></span> &lt;&lt; Voltar
</a>
<div class="m-5">
    <h3>{{ pageTitle }} </h3>

</div>

<form class="m-5" [formGroup]="funcionalidadesForm" (submit)="onSubmit()">
  <div class="form-row">
    <div class="form-group col-md-5">
      <label for="nome">Nome da Funcionalidade</label>
      <input type="text" class="form-control" id="nome" formControlName="nome_funcionalidade">
      <div class="small" *ngIf="!funcionalidadesForm.controls['nome_funcionalidade'].valid && funcionalidadesForm.controls['nome_funcionalidade'].touched"> Nome da Funcionalidade não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-5">
      <label for="descricao">Descrição</label>
      <input type="text" class="form-control" id="descricao" formControlName="descricao">
      <div class="small" *ngIf="!funcionalidadesForm.controls['descricao'].valid && funcionalidadesForm.controls['descricao'].touched"> A Descrição não pode ficar em branco!</div>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-5">
      <label for="componente">Componente</label>
      <select name="componente" id="componente" class="form-control componente" formControlName="id_componente" [attr.disabled]="true">
        <option value="{{ c.id_componente }}" *ngFor="let c of componentes" >{{c.nome_componente }}</option>
      </select>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-md-12">
        <button [disabled]="!funcionalidadesForm.valid" type="submit" class="btn btn-success btn-lg float-right mt-3 mb-4">Salvar</button>
    </div>
  </div>

</form>

No CSS do componente, adicionei o seguinte estilo pra ficar mais nitido ao usuário:

.ng-invalid.ng-touched:not(form) {
    border: 1px solid red;
}

Desse jeito, a borda do input fica vermelha quando exibir a msg de erro, e some após o usuário corrigir a informação.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .