Complete text boxes with angular

Question

Complete text boxes with angular

Navigation

#1 by (0 votes)

0

I am new to Angular and would like to know if the following can be done:

I have the following text boxes: Postal Code, City, Delegation / Municipality and State; I want to autocomplete the last three according to the zip code that was entered, I still can not find any information to help me.

I have the postal code as follows:

<div class="form-group col-md-4 col-lg-4">
    <label for="txt-zip-code">Código Postal:</label>
    <input class="form-control" id="txt-zip-code" name="txt-zip-code" maxlength="5" minlength="5" ng-model="info.zipCode" required="required" dig its="digits">
</div>

I have a service in which entering a valid postal code shows you information such as delegation / municipality, city, state and even colonies with that zip code, now how can I point to my service and according to the Postal code that I put me to load the other fields.

Annex the other fields:

<div class="form-group col-md-4 col-lg-4">
    <label for="txt-city">Ciudad:</label>
    <input class="form-control" id="txt-city" name="txt-city" maxlength="40" ng-model="info.city" required="required" onlyspaces="false">
</div>
<div class="form-group col-md-4 col-lg-4">
    <label for="txt-municipality">Delegación/Municipio:</label>
    <input class="form-control" id="txt-municipality" name="txt-municipality" maxlength="40" ng-model="info.municipality" required="required" onlyspaces="false">
</div>
<div class="form-group col-md-4 col-lg-4">
    <label for="txt-state">Estado:</label>
    <input class="form-control" id="txt-state" name="txt-state" maxlength="40" ng-model="info.state" required="required" onlyspaces="false">
</div>

My service is done with spring and is a Rest type that returns an object with the fields state, delegation / municipality, colonies.

I hope you explained.

Update 1 I consume my service in the following way, in my configurationService file:

   getDataZipCode: function(zipcode) {
        return $http({
            method: 'GET',
            url: '/configurator/rest/getZipCode?zipcode=' + zipcode
        });
    },

As you can see it is a GET service that obtains the aforementioned data. Now to get the data (according to me) I do it in the following way, in my onlineController.js file:

Service.getDataZipCode().then(function successCallback(response) {
        $scope.getDataZipCode = response.data;
    }, function errorCallback(responseError) {
        growl.error("Error al recuperar los datos del codigo postal", {ttl:5000});
    });

Now how do I fill in the fields of city, delegation / municipality and state at the time the user enters a postal code?

Thank you.

javascript angular spring

asked by 5frags 07.11.2018 в 00:20

source

1 answer

how do the elements of a list go from one function to another? Fontawesome icons are not displayed, I am working with angular

score 0 · Answer 1

Good morning, colleague! I hope this example can help you. What you should keep in mind is: 1 - The inputs must have ng-models that you can manipulate in your controller 2 - Properly distribute the properties of the object that you get in response to your service.

Watch this example and try to adapt it to your needs. Put a number in the input and give it a search of 1-10 to get a correct answer.

<!doctype html >
<html lang="en" ng-app="app">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>

<div ng-controller="UserController as user">
    <form ng-submit="user.getUser();">
        <input type="text" ng-model="user.userId">
        <button type="submit">Search user</button>

        <input type="text" ng-model="user.chosenUser.name">
        <input type="email" ng-model="user.chosenUser.email">
    </form>
    <pre>{{ user.chosenUser | json }}</pre>
</div>

<script>
    angular
        .module('app', [])
        .controller('UserController', function (UserService) {
            var ctrl = this;
            ctrl.userId = '';
            ctrl.chosenUser = {};
            ctrl.getUser = function () {
                if (!ctrl.userId) {
                    return;
                }
                UserService
                    .getUser(ctrl.userId)
                    .then(function (response) {
                        ctrl.chosenUser = response;
                    });
            }
        })
        .service('UserService', function ($http) {
            var API = '//jsonplaceholder.typicode.com/users/';

            this.getUser = function (userId) {
                return $http
                    .get(API + userId)
                    .then(function (response) {
                        return response.data;
                    }, function (reason) {
                        return reason;
                    });
            }
        });
</script>
</body>
</html>