How to mimic a HTML Form request in Angularjs?

Question

I made an app using Laravel so most of the pages uses simple HTML Form to send HTTP requests.

I recently decided to use Angular Material to code my front-end, but as all of the input components forces to use ng-model, I want to mimic the behavior of the simple HTML Form Submission using an Angular Controller.

For example: I want this

index.html

<form action="/confirm" method="POST">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

By using this

index.html

<input type="text" name="name" ng-model="name">

<form action="/confirm" method="POST" ng-submit="submit($event)">
    <input type="submit" value="Submit">
</form>

app.js

var app = angular.module('MyApp', []);
app.controller('AppController', ['$scope', function($scope){
    $scope.submit = function(e){
        e.preventDefault();
        var url = e.currentTarget.getAttribute('action');
        var data = {
            name : this.name
        };

        // Some code here that I can't figure out
        // Which will mimic the simple HTML Form Submission

    };
}]);

One solution is to append a hidden input inside the form for each of the inputs outside the form. I don't want to do it that way, it will be very in-efficient.

Any other ways? Thank You.

And it will be great if anyone knows how to handle this for a file input.

Kyle · Accepted Answer · 2016-05-03 20:16:31Z

2

Javascript:

app.controller("MainCtrl", ["$scope", "$http", function($scope, $http) {
  $scope.name = null;

  $scope.submitForm = function(name) {
    //submitting form items depend on what your /confirm endpoint is expecting
    //is it expecting JSON, form data in the body, etc?

    //JSON
    var payload = {
        name: name
    };

    //submitting via FormData
    //var payload = new FormData();
    //payload.append("name", name);

    //use $http to post to server
    $http.post('/confirm/', payload).then(function(response) {
        //success
    }, function() {
        //an error has occurred
    });
  }
}]);

HTML:

<form id="myForm" name="myForm" ng-submit="submitForm(name)">
    <!-- bind model to input using ng-model -->
    <input required type="text" ng-model="name" />
    <button ng-disabled="myForm.$invalid" type="submit" ng-click="submitForm(name)">Submit</button>
</form>

answered May 3, 2016 at 20:16

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jimut Over a year ago

Yes, I can send the data correctly, but it is not redirecting to that page after the request like a html form submission. How to do that? Thanks.

Kyle Over a year ago

Look inside .then(). These are your callback functions on what happens when the server has accepted/rejected the data. .then(function(response) { window.location="path/to/next/page"; }).catch(function(response) { alert("uh oh!")l });

Donald P. Morton · Accepted Answer · 2016-05-03 19:54:44Z

0

You could use the $http service to make http calls you code should look like this

var url = e.currentTarget.getAttribute('action');
var data = {
   name : this.name
};
$http({
  method: url,
  url: '/confirm',
  data:data
}).then(function successCallback(response) {
  // this callback will be called asynchronously
  // when the response is available
}, function errorCallback(response) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});

answered May 3, 2016 at 19:54

Donald P. Morton

3552 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to mimic a HTML Form request in Angularjs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related