How to submit forms in AngularJs Multiple ways

There are multiple ways to submit forms in AngularJS, in this tutorial we are going to see three ways we can submit forms.

What we are working with

In this example, we have AppController which contains a form with only one Input and when the form is posted we will intercept it using angular and process it with AngularJS, We are using array syntax in our angular code which makes our code minification proof.

Method 1: Submitting form using ng-submit

This is the most common way to submit forms in AngularJS, here we are going to add ng-submit directive in our form tag and set it's value to function we are going to call when form is submitted.

ng-submit form submission example

<!-- Using ng-submit -->
<div ng-controller="AppController">
	<form  ng-submit="doSomeAction()">
		<div class="form-group">
			<label for="email">Email</label>
			<input type="email" name="email" id="email" ng-model="userEmail">
		</div>			
		<div class="form-group">
			<button type="submit">Submit</button>
		</div>
	</form>	
</div>
var app = angular.module('app', []);

app.controller('AppController', ['$scope', function($scope) {
	$scope.userEmail = '';
		
    //using ng-submit
	$scope.doSomeAction = function() {
        //you code
		console.log($scope.userEmail);
	}
}]);

Method 2: Submitting form without ng-submit

You can also submit the form without adding the ng-submit directive to your form tag, Instead of adding submit button in your forms, you may add normal button and attach ng-click event to it.

ng-click form submission example

<!-- using normal button instead of sbumit buttton  -->
<div ng-controller="AppController">
	<form >
		<div class="form-group">
			<label for="email">Email</label>
			<input type="email" name="email" id="email" ng-model="userEmail">
		</div>			
		<div class="form-group">
			<button type="button" ng-click="doSomeAction()">Submit</button>
		</div>
	</form>	
</div>
var app = angular.module('app', []);

app.controller('AppController', ['$scope', function($scope) {
	$scope.userEmail = '';
	
	//using normal button instead of submit button
	$scope.doSomeAction = function() {
        //your code
		console.log($scope.userEmail);
	}

}]);

Method 3: Submitting form with ng-submit without removing action attribute

You are required to remove action attribute from your form if you want to process it using AngularJs, note that angular will not process the form if action attribute is present in the form.

This technique can be useful when you are generating forms using PHP or some kind of PHP template engine, in this case, I use Laravel blade to generate forms, it generates forms that have action attribute and angular will not process it because of action attribute.  

You can pass $event in your ng-submit associated functions and prevent the default action of the form, which is posting to the page which causes the page to reload.

ng-submit with preventing default action example

<!-- when you can't remove action or don't want to remove action -->
<div ng-controller="AppController">
	<form method="post" action="sompage.php" ng-submit="doSomeAction($event)">
		<div class="form-group">
			<label for="email">Email</label>
			<input type="email" name="email" id="email" ng-model="userEmail">
		</div>			
		<div class="form-group">
			<button type="submit">Submit</button>
		</div>
	</form>	
</div>	
var app = angular.module('app', []);


app.controller('AppController', ['$scope', function($scope) {
	$scope.userEmail = '';

	//preventing default with ng-submit
	$scope.doSomeAction3 = function(event) {
		event.preventDefault();
        //your code
		console.log($scope.userEmail);
	}

}]);

That's it, if you know any other way, please tell us in the comment section.

Something to say? Tell us in comment section.