Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Aula 6 - retornar o form para estado inicial

Referente ao curso AngularJS: crie webapps poderosas

por JOSE ANGELO
| 34.9k xp | 51 posts

Prezados, boa tarde,

após fazer a inclusão de uma imagem o formulário com sucesso, os campos do formulário são limpos mas as mensagens de erro voltam a ser exibidas, como se ocorresse submissão do form com os campos em branco.

Buscanco solução encontrei o método setPristine. Com ele, o form deveria voltar ao estado inicial.

Então, no fotos-controller.js eu fiz isso:

angular.module('alurapic').controller('FotosController', function ($scope, $http) {
    $scope.fotos = [];
    $scope.filtro = '';

    $http.get('v1/fotos')
    .success(function(fotos) {
        $scope.fotos = fotos;
        $scope.formulario.setPristine();
        console.log(fotos)
    })
    .error(function(erro) {
        console.log("A casa caiu")
        console.log(erro);
    })

Porém o problema de as mensagens de erro continuarem sendo exibidas após submeter o formulário continuam sendo exibidas.

Alguma sugestão?

Grato,

Ângelo

4 respostas
por Delvair Raul
| 27.3k xp | 2 posts

Olá Ângelo, tudo bem?

Eu percebi o mesmo problema durante o exercício.

O que ocorre é que, após submeter o formulário, executar o salvamento, e retornar para o form, o formulário é realmente zerado, e este é o problema.

Porque zerar o formulário é o problema, você deve pensar. O problema é que, as condicionais para exibir as mensagens dos validadores verificam se o formulário foi enviado (submetido > formulario.titulo.$submitted), que é verdadeiro, e verifica também se o campo apresenta um erro (no validador required, por exemplo > formulario.titulo.$error.required), o que nesse momento será verdadeiro também, porque o campo encontra-se vazio.

Podemos resolver está questão de diversas formas, mas a que eu achei mais interessante, foi trocar o primeiro verificador de: formulario.titulo.$submitted para formulario.titulo.$touched

O que muda? Muda que agora, a mensagem não esperará o formulário ser submetido para exibir a mensagem de alerta, mas, aguardará apenas que o campo em questão (titulo, no caso) seja selecionado e alterado uma primeira vez, como o termo $touched diz, que o campo seja tocado.

Então, assim que você coloca o foco no campo, ele o validador já se torna verdadeiro.

Assim então, resolvendo o problema do retorno após o salvamento, já o como os campos ainda não estão $touched, os alertas não serão exibidos.

Espero ter ajudado.

por JOSE ANGELO
| 34.9k xp | 51 posts

Obrigado, mas no momento estou querendo aprender a usar o Pristine.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

OI Jose, dá uma olhada nessa resposta que dei para o aluno:

https://cursos.alura.com.br/forum/topico-esconder-os-spans-de-required-19635

solução!
por JOSE ANGELO
| 34.9k xp | 51 posts

Perfeito.

Obrigado.

Só que como eu usei a condição do $pristine invertido (sem a exclamação). Não entendi o motivo.

No link de exemplo está assim:

<span ng-show = "formulario.$submitted && formulario.titulo.$error.required && !formulario.titulo.$pristine" 
                class="form-control alert-danger">
                Título obrigatório
</span>

No meu código, funcionou assim:

<div class="page-header text-center">
    <h1>{{foto.titulo}}</h1>
</div>

<p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>

<form novalidate name="formulario" class="row" ng-submit="submeter()">
    <div class="col-md-6">
        <div class="form-group">
            <label>Título</label>
            <input ng-model="foto.titulo" name="titulo" class="form-control" ng-required="true" ng-maxlength="20">
            <span ng-show="formulario.$submitted && formulario.titulo.$error.required && formulario.titulo.$pristine" class="form-control alert-danger">Título obrigatório</span>
            <span ng-show="formulario.$submitted && formulario.titulo.$error.maxlength && formulario.titulo.$pristine" class="form-control alert-danger">Máximo de 20 caracteres</span>
        </div>
        <div class="form-group">
            <label>URL</label>
            <input ng-model="foto.url" name="url" class="form-control" ng-required="true">
            <span ng-show="formulario.$submitted && formulario.url.$error.required && formulario.url.$pristine" class="form-control alert-danger">URL obrigatória</span>
        </div>
        <div class="form-group">
            <label>Grupo</label>
            <select name="grupo" class="form-control" ng-required="true"
            ng-model="foto.grupo" ng-controller="GruposController"
            ng-options="grupo._id as (grupo.nome | uppercase) for grupo in grupos">
                <option value="">Selecione grupo
                </option>
            </select>
            <span ng-show="formulario.$submitted && formulario.grupo.$error.required && formulario.grupo.$pristine" class="form-control alert-danger">Grupo obrigatório</span>
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea ng-model="foto.descricao" name="descricao" class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-primary" ng-disabled="formulario.$invalid">Salvar</button>
        <a href="/" class="btn btn-primary">Voltar</a>
    </div>
    <div class="col-md-6">
        <minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
    </div>
</form>