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 already appear. I would like that when loading the page no message appeared and the button was disabled and only when the user clicked or typed that my Validators
will take action showing error messages.