Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Validação orientada a eventos

Olá Flávio, nesse implementação do projeto eu gostaria de saber como eu poderia fazer para validar os campos somente após um determinado evento? como o blur, de forma que não seja exibido de início os campos inválidos do formulário quando a página for renderizada.

4 respostas

Nesse caso você terá que abdicar de todo o aparto que o Angular lhe dá e terá que realizar as validações manualmente, se não me engano.

Por exemplo, terá que fazer (blur)="chamadaDeMétodoDeValidação()". Nesse caso, toda a complexidade cairá no seu colo, infelizmente. Da mesma maneira que o Angular nos dá zilhões de facilidades, quando precisamos mudar algo pode ser que a mudança não seja trivial.

Há até uma discussão longa sobre isso no projeto do Angular

https://github.com/angular/angular/issues/7113

Deixa eu verificar algo aqui. Já já eu posto.

Então, tem algumas estados do input que podem ajudá-lo:

Estado Classe, quando trueClasse, quando false
O controle foi visitadong-touchedng-untouched
O valor do controle mudoung-dirtyng-pristine
O valor do controle é válido. ng-validng-invalid

Nesse sentido, na hora que for fazer a validação, terá que combinar o teste do `ngIf com aquele que fizer sentido durante o seu teste. Por exemplo:

   <div [hidden]="password.valid || password.pristine" class="alert alert-danger">password is required</div>

Mas ainda assim não sei se isso é exatamente o que deseja.

solução!

Muito obrigado Flávio, era isso mesmo, você é sempre muito prestativo e disposto a sanar nossas dúvidas. Só uma dica para quem se interessar, eu vi que ficaria muito verbosa a condição do *ngIf:

*ngIf="fotoForm.controls.url.invalid && (fotoForm.controls.url.dirty || fotoForm.controls.url.touched)">

então eu coloquei essas propriedades getters que me retorna um objeto AbstractControl que possui as propriedades dos estados.

public get titulo(){
        return this.fotoForm.get("titulo");
    }

    public get url(){
        return this.fotoForm.get("url");
    }

e no formulário eu acesso as propriedades getters:

<div *ngIf="titulo.invalid && (titulo.dirty || titulo.touched)">                        
                        ...
                    </div>

Marquei sua resposta como correta para que você ganhe os pontos.