1
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.
You need to declare the variables, even if they are empty. You have already done this?
– Marco Garcia