Disable Initial Validation of the Angular Form

0
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.

    
asked by anonymous 20.02.2018 / 13:07

1 answer

0

When you use

   <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 get input error

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