Angularjs take a data from the input that was filled in by a JS

Asked

Viewed 3,857 times

3

Good morning, I’m beginner with Web, although I know how to program in other languages. My doubt is the following, through the via cep I got the algorithm that fills the address fields through a Javascript.

my imput is this:

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

Javascript fills in the input when typing the zip code, but when saving, the data that was completed by js is NOT saved. Only the ZIP code, Number and Add-on that were manually typed. Can someone help me? Thank you.

I did so, I used the script of this site https://viacep.com.br/exemplo/javascript/

to mouth the address through the zip code. then I put the same id in js to fill the text area.

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

perfectly fills, it happens that at the time of saving, the fields that were filled by the script are blank, only save the fields that I manually typed as number and address complement

I found that by default Angularjs requires the fields to have some user interaction to perform Binding. Does anyone know how to force Binding into the input field or turn it off at the angle? thank you.

  • Why don’t you request the Via Cep by Angular?

  • I didn’t understand your question, could you rephrase ? i already made an example with this api, from a look at this demo: https://plnkr.co/edit/9Ry6GfYqt2phUsW5iBFop=preview

  • Your example is ok. You can ask the example of the question?

  • I did so, I used the script of this site https://viacep.com.br/exemplo/javascript/ to address the address via the zip code. dai put the same id in js to fill the text area. input class="form-control" type="text" id="street" ng-model="cadastro.endereco.endereco" maxlength="60" fills perfectly, it turns out that when saving, the fields that were filled in by the script are empty, only save the fields I manually typed as address number and complement

3 answers

1

The point is that you have to save that in your variable that does the midfield between your javascript and your html page.

In Angularjs we use the variable $scope to access it on the javascript side (inside your controller) while on the page side we have the ng-model. From your part of the code I noticed that you’ve already put the ng-model on the page call, now what you have to ensure is that the past attributes are being saved in the $scope.

What I suggest is that you change all Javaspcript assignments from the example page to direct assignments to $scope instead of attributing to any input for Id, is precisely for this type of facility that the AngularJS serves. Rather than their duties being so:

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

They’ll stay that way

$scope.rua = conteudo.logradouro;

And the input field should be as follows:

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

The correct thing would be to do this for all the manipulated DOM variables instead of taking them by ID.


You can read more about $Scope in the following links:

Link 1

Link 2

  • Thanks for your help, I took your advice, but it hasn’t worked out yet. It turns out that I am using Laravel 5, the.js register file has the function of saving the addresses in the variable address. While my script is inside html. as I’m in the training phase here at the company, and had never seen any of this, I’m getting a bit beat up.

  • What error is happening now?

  • As the friend commented in the answer below it is desirable that you add all the parts of the problem, whether as a tag or in the description. I also suggest further detail the question, so we can help you more efficiently.

1

I switched the $http.get for $getJSON and so it worked.

And in inputs do not need to repeat the field model="cadastro.endereco.endereco". Just do model="cadastro.endereco"

See below how it looked:

  <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;
        });
    };
});

1

Good morning Celso, why don’t you change this algorithm that fills the html, and instead of the same sector the value for the DOM input you don’t make it set the value directly to your javascript "cadas.endereco.endereco" variable.

This will surely solve your problem.

hope I’ve helped.

  • Now this error appears. ncaught Typeerror: Cannot set Property 'value' of null I forgot to say, I am using Laravel 5, the address variable is inside the.js register that is inside controllers. I’m catching that is a beauty of it.

  • So Celso has no knowledge of Laravel, so I can’t help you. Add an Laravel 5 tag to help limit your question.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.