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

Question

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.

Answer 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

Answer 2

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

Answer 3

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.