Disable Initial validation of the Angular form

Question

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

Here I have my 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>

And here my form, the functionality is right the only thing is that when I load the page the error messages are already appearing. I would like that when loading the page no message appeared and the button was disabled and only when the user click or type that mine Validators will go into action showing the error messages.

Answer 1

When you use the

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

You are asking to display if the form is invalid ... so it is appearing right at the beginning, you need to catch the input error

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

Answer 2

Complementing Herbert Junior’s response, I’ll leave an example of how it looks in 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>

In the component CSS, I added the following style to sharpen the user:

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

Thus, the edge of the input turns red when displaying the error msg, and disappears after the user corrects the information.