AngularJS Form Submit and Redirect

Question

Is there a way to submit a form with AngularJs without using an asynchronous call? I'd like it to act as if I hit the submit button on a regular HTML only form.

HTML:

<div ng-controller="myController">
    <form id="myForm">
      <input ng-model="handle">
      <button ng-click="submitForm($event)">Submit</button>
    </form>
</div>

Currently I'm doing it like I am below. The problem is, I'm still on the same page, and then I have to redirect. But the next page's content depends on the form submission, and I'd rather not store the contents of the form submission in the session.

angular.module('myApp').controller('myController', ['$scope', function($scope) {

    $scope.handle;

    $scope.submitForm = function($event) {

        $event.preventdefault();

        var modifiedHandle= $scope.handle + 'handle';

        $http({
            url: '/submit',
            method: 'POST',
            data: {'handle': modifiedHandle }
        }).then(function(response){

           $window.location.href = '/success';

           //The problem of this approach is that the contents of '/success' depends on the form input.
           //I'd rather not have to flash the submitted data to a session. Is there a pure AngularJs way to do this?

        }, function(data, status){});

    }


}]);

score 0 · Answer 1 · edited May 23 '17 at 12:30

If you are using ui-router instead of ngRoute then you can pass an object to a new state as a parameter. This parameter does not end up as a query string in the URL. This approach is detailed in this answer and I have used this approach many times. So instead of using $window you would use $state.go.

Alternatively, you have 2 other options. You could put your object directly on the $rootScope, making it accessible from the controller of your success page. Generally speaking you do not want to pollute you're rootScope, but it will work.

The most pragmatic angular approach I think would be to create a service that stores the value. Services are singletons and as such when you set a value, it will be accessible from other controllers. Your service may look something like this:

app.service("Store", function() {

    var formObject = {};

    this.set = function(object) {
        formObject = object;
    };

    this.get = function() {
        return formObject;
    };

    return this;
});

Then after your successful form submission you would call Store.set(yourObject), and then on load of your new controller you could call Store.get() to return the value. Read more about angular services from the docs.

Sure this may be considered a session, but it is the angular way if the other two options provided don't suite your needs.

score 0 · Answer 2 · answered Apr 16 '18 at 12:10

Using Agular Js CLI you can redirect your page on successful submition form by:

postData(email){
    if(email==""){
      alert('email feild is empty');
      return false;
    }
    else{
      window.location.href = 'https:wwww.google.com';
    }
  }

here email under postData(email) is basically a model that is using in html code

AngularJS Form Submit and Redirect

2 Answers2