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.