3

Bom dia, sou iniciante com Web, embora eu saiba programar em outras linguagens. A minha duvida é a seguinte, através do via cep eu peguei o algoritmo que preenche os campos de endereço através de um Javascript.

meu imput é esse:

input class="form-control" type="text" id="rua" ng-model="cadastro.endereco.endereco" maxlength="60"

o Javascript preenche o input ao digitar o cep, porém na hora de salvar, os dados que foram completados pelo js NÃO são salvos. Apenas o CEP, Número e Complemento que foram digitados manualmente. Alguém poderia me ajudar? Obrigado.

Eu fiz assim, usei o script deste site https://viacep.com.br/exemplo/javascript/

para bucar o endereco atravez do cep. dai coloquei a id igual no js para preencher a aárea de texto.

input class="form-control" type="text" id="rua" ng-model="cadastro.endereco.endereco" maxlength="60"

preenche perfeitmente, acontece que na hora de salvar, os campos que foram preenchidos pelo script ficam em branco, so salvam os campos que digitei manualmente como número e complemento do endereço

Descobri que por padrão o AngularJS exige que os campos tenham alguma interação do usuário para efetuar o binding. Alguém sabe como faço pra forçar o binding para o campo input ou então desativar isso no angular? obrigado.

4
  • Por que você não faz a requisição para o Via Cep pelo Angular?
    – adelmo00
    Commented 25/04/2016 às 14:19
  • Não entendi a sua pergunta, você poderia reformular ? eu já fiz um exemplo com esta api, da uma olhada nessa demo: plnkr.co/edit/9Ry6GfYqt2phUsW5iBFo?p=preview Commented 25/04/2016 às 14:32
  • Seu exemplo está ok. Pode colocar o exemplo da pergunta?
    – adelmo00
    Commented 25/04/2016 às 14:35
  • Eu fiz assim, usei o script deste site viacep.com.br/exemplo/javascript para bucar o endereco atravez do cep. dai coloquei a id igual no js para preencher a aárea de texto. input class="form-control" type="text" id="rua" ng-model="cadastro.endereco.endereco" maxlength="60" preenche perfeitmente, acontece que na hora de salvar, os campos que foram preenchidos pelo script ficam em branco, so salvam os campos que digitei manualmente como número e complemento do endereço Commented 25/04/2016 às 16:12

3 Respostas 3

1

Bom dia Celso, por que você não altera este algoritmo que preenche o html, e ao invés do mesmo setor o valor para o input do DOM você não faz ele setar o valor diretamente para sua variável "cadastro.endereco.endereco" do javascript.

Isto com certeza vai solucionar seu problema.

espero ter ajudado.

2
  • agora aparece esse erro. ncaught TypeError: Cannot set property 'value' of null eu esqueci de dizer, estou usando o laravel 5, a variavel endereco está dentro do cadastro.js que fica dentro de controllers. eu to apanhando que é uma beleza disso. Commented 25/04/2016 às 16:39
  • Então Celso não tenho conhecimento com laravel, assim não consigo te ajudar. Adicione uma tag laravel 5 para ajudamos a limitar sua pergunta. Commented 25/04/2016 às 18:49
1

A questão é que você tem que salvar isso na sua variável que faz o meio de campo entre seu javascript e sua página html.

No AngularJS usamos a variável $scope para acessarmos ela no lado do javascript (dentro do seu controller) enquanto no lado da página temos o ng-model. Pela sua parte do código pude notar que você já colocou o ng-model na chamada da página, agora o que tens que garantir é que os atributos passados estão sendo salvos no $scope.

O que sugiro é que troque todas as atribuições do Javaspcript da página de exemplo para atribuições direto para $scope ao invés de atribuir a algum input por Id, é justamente para esse tipo de facilidade que o AngularJS serve. Ao invés de suas atribuições serem asim:

document.getElementById('rua').value=(conteudo.logradouro);

Elas vão ficar dessa maneira

$scope.rua = conteudo.logradouro;

E o campo de input de deveria ser como segue:

<input name="rua" ng-model="rua" type="text" id="rua" size="60" /></label>

O correto seria fazer isso para todas as variáveis manipuladas do DOM ao invés de pega-las por ID.


Você pode ler mais sobre o $scope nos links que seguem:

Link 1

Link 2

3
  • Obrigado pela ajuda, segui seu conselho, mas ainda nao deu certo. Acontece que estou usando o Laravel 5, o arquivo cadastro.js tem a função de salvar que salva os enderecos em na variavel endereco. Enquanto o meu script está dentro do html. como eu estou em fase de treinamento aqui na empresa, e nunca havia visto nada disso, estou apanhando um bocado. Commented 25/04/2016 às 18:21
  • Qual o erro acontecendo agora?
    – pmargreff
    Commented 25/04/2016 às 18:45
  • Como o amigo comentou na resposta abaixo é desejável que você adicione todas as partes do problemas, sejam elas como tag ou na descrição. Sugiro também detalhar melhor a pergunta, para que possamos te ajudar de maneira mais eficiente.
    – pmargreff
    Commented 25/04/2016 às 20:05
1

Troquei o $http.get pelo $getJSON e assim deu certo.

E nos inputs não precisa repetir o campo model="cadastro.endereco.endereco". Faça apenas model="cadastro.endereco"

Veja abaixo como ficou:

  <input class="form-control" ng-model="p.localidade">
  <input class="form-control" ng-model="p.uf" >
  <input class="form-control" ng-model="p.bairro" >
  <input class="form-control" ng-model="p.logradouro" >
var app = angular.module("cep");
app.controller("buscaCEPCtrl",function($scope,$http){

    $scope.buscar = function(cep){
   //$http.get('https://viacep.com.br/ws/'+cep+'/json/').success(function(data){
    $.getJSON('https://viacep.com.br/ws/'+cep+'/json/').success(function(data){
            $scope.form = data;
                $scope.resCep= false;
        }).error(function(){
            $scope.resCep= true;
        });
    };
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .