Mastering the ng-submit directive for AngularJS

Question

Mastering the ng-submit directive for AngularJS

Having an issue with my form that submits a location to Google's Geocoder and updates the map with the lat/long. When using ng-click on the icon, it requires double clicking to work properly. And when using ng-submit on the form, it appends to the URL instead of performing the task as expected. I'm determined to figure this out, but feeling a bit lost about what exactly is going wrong.

Here is the structure of the form:

<li>
  <form action="" class="search-form" ng-submit="convertLatLonToAddress()">
      <div class="form-group has-feedback">
      <label for="search" class="sr-only">Search</label>
      <input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name">
          <i class="fa fa-search form-control-indicator"></i>                        
    </div>
  </form>
</li>

Below you'll find the function being used:

$scope.convertLatLonToAddress = function(){
  var address = $('#search').val();
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
    } 
  }); 
};

Credit goes to @PSL for the fix! Here is the updated code:

<li>
  <form class="search-form" ng-submit="convertLatLonToAddress(searchText)">
    <div class="form-group has-feedback">
      <label for="search" class="sr-only">Search</label>
      <input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">
      <button style="visibility: hidden"></button>
        <a ng-click="convertLatLonToAddress(searchText)">
          <i class="fa fa-search form-control-indicator"></i>                        
        </a>
    </div>
  </form>
</li>

And here is the modified function:

$scope.convertLatLonToAddress = function(searchText){
  // var address = $('#search').val();
  var address = searchText;
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
      $scope.$apply();
    } 
  }); 
};

javascript angularjs forms angularjs-ng-click ng-submit

Answer 1

Answer №1

It is important to manually trigger the digest cycle within the asynchronous call of geocode, as geocode does not execute within an Angular context.

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
      $scope.$apply();
    } 
  });

Whenever you click, ng-click initiates the digest cycle, causing the previous cycle to run the non-angular asynchronous call and update the scope which Angular is unaware of. Upon clicking again, the digest cycle runs once more with the previously set values being retrieved, hence requiring 2 clicks. To have ng-submit execute, a form element trigger such as a button or input type="submit" must be used to cause submit behavior on the form. Additionally, it is advisable to remove action from the form unless redirection is intended.

Furthermore, utilizing ng-model on the textbox to pass the value to your function rather than directly obtaining it from the DOM is recommended.

<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">

Pass the value via ng-click as

ng-click="convertLatLonToAddress(searchText)"

and utilize it inside your function.

To eliminate the need for scope.apply(); in your controller, consider abstracting out geoCoder into an Angular service that returns a promise by creating a deferred object.

myApp.service('geoCoderService', ['$q', function($q){
      this.getCoordinates = function(address){
          var defer = $q.defer();
           var geocoder = new google.maps.Geocoder();

          geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             var latitude = results[0].geometry.location.lat();
             var longitude = results[0].geometry.location.lng();
             return defer.resolve({latitude: latitude, longitude: longitude});
           } 
          //failure
          defer.reject(status);
       }); 
          return defer.promise;
      }

});

Inject geoCoderService and retrieve data using:

 geoCoderService.getCoordinates(address).then(function(coordinates){
     //populate it
 }).catch(function(errorStatus){  /*oops Error*/ })

Answer 2

It is important to manually trigger the digest cycle within the asynchronous call of geocode, as geocode does not execute within an Angular context.

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
      $scope.$apply();
    } 
  });

Whenever you click, ng-click initiates the digest cycle, causing the previous cycle to run the non-angular asynchronous call and update the scope which Angular is unaware of. Upon clicking again, the digest cycle runs once more with the previously set values being retrieved, hence requiring 2 clicks. To have ng-submit execute, a form element trigger such as a button or input type="submit" must be used to cause submit behavior on the form. Additionally, it is advisable to remove action from the form unless redirection is intended.

Furthermore, utilizing ng-model on the textbox to pass the value to your function rather than directly obtaining it from the DOM is recommended.

<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">

Pass the value via ng-click as

ng-click="convertLatLonToAddress(searchText)"

and utilize it inside your function.

To eliminate the need for scope.apply(); in your controller, consider abstracting out geoCoder into an Angular service that returns a promise by creating a deferred object.

myApp.service('geoCoderService', ['$q', function($q){
      this.getCoordinates = function(address){
          var defer = $q.defer();
           var geocoder = new google.maps.Geocoder();

          geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             var latitude = results[0].geometry.location.lat();
             var longitude = results[0].geometry.location.lng();
             return defer.resolve({latitude: latitude, longitude: longitude});
           } 
          //failure
          defer.reject(status);
       }); 
          return defer.promise;
      }

});

Inject geoCoderService and retrieve data using:

 geoCoderService.getCoordinates(address).then(function(coordinates){
     //populate it
 }).catch(function(errorStatus){  /*oops Error*/ })

Answer 3

Answer №2

Give this a try

 var application = angular.module('myApp', []);
 application.controller('myCtrl', function($scope) {
   $scope.convertCoordinatesToLocation = function() {
     var locationName = $('#search').val();
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({
       'address': locationName
     }, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
         $scope.latitude = results[0].geometry.location.lat();
          $scope.longitude = results[0].geometry.location.lng();
         console.log($scope.latitude + ' and ' + $scope.longitude);
         setTimeout(function(){$scope.$apply();},0)
       }
     });
   };
 });

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <li>
      <div class="form-group has-feedback">
        <label for="search" class="sr-only">Search</label>
        <input type="text" class="form-control" name="search" id="search" placeholder="Enter a location to find its coordinates">
        <i class="fa fa-search form-control-indicator"></i> 
        <button ng-click="convertCoordinatesToLocation()">Find Location</button>
        <br>
       Latitude :  <input type="text" ng-model="latitude"><br>
       Longitude :  <input type="text" ng-model="longitude">
        
      </div>
    </li>
  </div>
</body>

Answer 4

Give this a try

 var application = angular.module('myApp', []);
 application.controller('myCtrl', function($scope) {
   $scope.convertCoordinatesToLocation = function() {
     var locationName = $('#search').val();
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({
       'address': locationName
     }, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
         $scope.latitude = results[0].geometry.location.lat();
          $scope.longitude = results[0].geometry.location.lng();
         console.log($scope.latitude + ' and ' + $scope.longitude);
         setTimeout(function(){$scope.$apply();},0)
       }
     });
   };
 });

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <li>
      <div class="form-group has-feedback">
        <label for="search" class="sr-only">Search</label>
        <input type="text" class="form-control" name="search" id="search" placeholder="Enter a location to find its coordinates">
        <i class="fa fa-search form-control-indicator"></i> 
        <button ng-click="convertCoordinatesToLocation()">Find Location</button>
        <br>
       Latitude :  <input type="text" ng-model="latitude"><br>
       Longitude :  <input type="text" ng-model="longitude">
        
      </div>
    </li>
  </div>
</body>

Mastering the ng-submit directive for AngularJS

Answer №1

Answer №2

Similar questions

Different Angular 2 components are resolved by routes

Can you recommend a straightforward method in Vue.js for validating the format of user input?

Error: React - Module not found. This issue arises when attempting to require the 'express' package from within the installed

How should a string be properly converted to JSON format?

Issue with $_SERVER['PHP_SELF'] not functioning properly

Mastering the art of handling errors with Javascript Promises

The functionality of getElementsByClassName and appendChild is not producing the desired outcome

Running JavaScript code when the route changes in Angular 6

What could be causing the "Invalid Config file error" when Karma tests the ng-boilerplate app?

Change the x and y positions of several div elements as the mouse moves in JavaScript

Struggling to map JSON data (received from WCFRest) onto an HTML table

Invisible and Unrestricted automatic playback

The cookie appears in the callback URL, but does not get stored in the browser's cookie storage

What is the best method for storing a JavaScript widget with analytics - should it be done dynamically or statically?

Understanding @@iterator in JavaScript: An in-depth look

Connect to content on the current page

Implement jQuery to toggle a class on click for added functionality

Retrieve the URL redirected by JavaScript without altering the current page using Selenium

What is the best method for utilizing a single L.Shapefile/zip file Object and modifying the onEachFeature function for each layer?

Sorting and filtering data using AngularJS filter and orderBy inside a controller or factory