AngularJS How to Submit Form

Submitted by: 
Language: 
Visitors have accessed this post 304 times.

Getting Started

I've used CDN for Bootstrap and Angular JS so you need internet connection for them to work.

index.html

This is our index that contains our sample form that we are going to submit.

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <meta charset="utf-8">
  4. <title>AngularJS How to Submit Form</title>
  5. <link href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
  6. <script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  7. </head>
  8. <body" rel="nofollow">http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></s...</a> ng-controller="myController">
  9. <div class="container">
  10. <h1 class="page-header text-center">AngularJS How to Submit Form</h1>
  11. <div class="row">
  12. <div class="col-sm-4 col-sm-offset-4">
  13. <div class="panel panel-default">
  14. <div class="panel-body">
  15. <form name="myForm" ng-submit="submitForm()">
  16. <div class="form-group">
  17. <label>Firstname:</label>
  18. <input type="text" class="form-control" ng-model="user.firstname" required>
  19. </div>
  20. <div class="form-group">
  21. <label>Lastname:</label>
  22. <input type="text" class="form-control" ng-model="user.lastname" required>
  23. </div>
  24. <div class="form-group">
  25. <label>Address:</label>
  26. <input type="text" class="form-control" ng-model="user.address" required>
  27. </div>
  28. <input type="submit" value="Submit" class="btn btn-primary" ng-disabled="myForm.$invalid">
  29. </form>
  30. </div>
  31. </div>
  32. <div class="alert alert-success text-center" ng-show="success" style="margin-top: 20px">
  33. <button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">&times;</span></button>
  34. {{ message }}
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <script src="angular.js"></script>
  40. </body>
  41. </html>

angular.js

This contains our angular js scripts.

  1. var app = angular.module('app', []);
  2. app.controller('myController', function($scope, $http){
  3. $scope.success = false;
  4.  
  5. $scope.submitForm = function(){
  6. console.log($scope.user);
  7. $scope.success = true;
  8. $scope.message = "Form Submitted Successfully";
  9. }
  10.  
  11. $scope.clearMsg = function(){
  12. $scope.success = false;
  13. }
  14. });

Notice that our input fields are bind to user object which can be access using $scope.user and upon form submit, we show this object in the console. You can then use this object to send to your API for whatever action you want.

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.