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

Comportamento inesperado ao limpar formulario

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Precisamos alimentar esse sistema e atividade Colocando em prática

por Fabio Sales
| 160.1k xp | 88 posts

Após submeter o limpar o formulário e limpar o objeto foto atribuindo um objeto vazio, os campos ficam limpos, porem apenas os controlados pelo Angular. No caso da diretiva "minha-foto" o elemento <img> que fica internalizado não tem seu valor do atributo src removido (Já estou utilizando o ng-src).

Quando digitamos qualquer valor na caixa de texto sensibiliza o atributo, mas retornar no sucesso do submissão do formulário não ocorre. Como essa situação poderia ser ajustada? Segue abaixo os trechos de codigo:

Arquivo minha-foto.html

<img class="img-responsive center-block" ng-src="{{url}}" alt="{{titulo}}">

Arquivo foto-controller.js

angular.module('alurapic').controller('FotoController', function($scope, $http){

    $scope.foto = {};

    $scope.mensagem = '';

    $scope.submeter = function(){

        if($scope.formulario.$valid){
            $http.post('v1/fotos', $scope.foto)
            .success(function(){
                $scope.mensagem = 'Cadastro realizado com sucesso!';
                $scope.foto = {};
                $scope.formulario.$setPristine();
            })
            .error(function(error){
                console.log(error);
                $scope.mensagem = 'FC001 - Falha ao cadastrar foto.';
            });
        }

    };
});

Arquivo foto.html

<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>Titulo</label>
            <input type="text" ng-model="foto.titulo" name="titulo" class="form-control" required ng-maxlength="20">
            <span ng-show="formulario.$submitted && formulario.titulo.$error.required" class="form-control alert-danger">
                Título obrigatório
            </span>
            <span ng-show="formulario.$submitted && formulario.titulo.$error.maxlength" class="form-control alert-danger">
                Título com no maximo 20 caracteres
            </span>
        </div>
        <div class="form-group">
            <label>URL</label>
            <input type="text" ng-model="foto.url" name="url" class="form-control" required>
            <span ng-show="formulario.$submitted && formulario.url.$error.required" class="form-control alert-danger">
                URL obrigatória
            </span>
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea type="text" ng-model="foto.descricao" name="descricao" class="form-control">
            </textarea>
        </div>
        <button type="submit" class="btn btn-primary" ng-disabled="!formulario.$valid">
            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>
4 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

De você fez databing com a diretiva que recebe seu valor do objeto foto ...limpando o objeto a foto exibida pela diretiva não deve apontar para lugar algum. Onde esta o código da sua diretiva?

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Oi Fábio, compartilhe seu código.

por Fabio Sales
| 160.1k xp | 88 posts

Oi Flavio, segue abaixo o código das diretivas:

Arquivo minhas-diretivas.js

angular.module('minhasDiretivas',[])
.directive('meuPainel', function() {

    var ddo = {};
    ddo.restrict = 'AE';
    ddo.transclude = true;
    ddo.scope = {
        titulo : '@'
    };
    ddo.templateUrl = 'js/directives/meu-painel.html';

    return ddo;
})
.directive('minhaFoto', function() {

    return {
        restrict : 'E',
        transclude : false,
        scope : {
            url: '@',
            titulo : '@'
        },
        templateUrl : 'js/directives/minha-foto.html'
    }
})
.directive('meuBotaoPerigo', function() {

    return {
        restrict : 'E',
        transclude : false,
        scope : {
            acao: '&',
            nome: '@'
        },
        template : '<button class="btn btn-danger btn-block" ng-click="acao()" >{{nome}}</button>'
    }
});

Arquivo minha-foto.html

<img class="img-responsive center-block" ng-src="{{url}}" alt="{{titulo}}">

Arquivo meu-painel.html

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">{{titulo}}</h3>
    </div>
    <div class="panel-body" ng-transclude>
    </div>
</div>

Grato mais uma vez

solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

O problema esta no uso do ng-src. Essa diretiva é para ser usado apenas na página principal da aplicação, aquela que pode ser carregada antes do Angular ter sido carregado. No caso dessa página, a de cadastro, o angular já foi carregado logo não é necessário o ng-src. Inclusive não vai acontecer aquelas chamadas ao servidor porque o Angular foi carregado e a interpolação vai funcionar.