ngSubmit Form Processing using AngularJS

ngSubmit Form Processing using AngularJS

In this Post We Will Explain About is ngSubmit Form Processing using AngularJS With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Post form data using angularjs Example

In this post we will show you Best way to implement AngularJS Tutorial – ng-submit and form, hear for AngularJS Submit Form ng-submit Directive with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Also Read :   AngularJS RESTful Web Service GET and POST API

index.html – Submit a form using AngularJS

It is simple main page index.html that Data contains simple angular HTML form that I am ganna to form submit.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS How to Submit Form</title>
	<!-- bootstrap.min.css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- angular.min.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="userCtrl">
<div class="live container">
    <h1 class="live page-header">AngularJS How to Submit Form</h1>
    <div class="live row">
	    <div class="live col-sm-4 col-sm-offset-4">
	    	<div class="panel panel-primary">
	    		<div class="live panel-body">
	    			<form name="userForm" ng-submit="userFormSubmit()">
	    				<div class="form-group">
		    				<label>User Firstname:</label>
		    				<input type="text" class="live24u form-control" ng-model="puser.ufname" required>
		    			</div>
		    			<div class="mydata form-group">
		    				<label>User Lastname:</label>
		    				<input type="text" class="live24u form-control" ng-model="puser.ulname" required>
		    			</div>
		    			<div class="live form-group">
		    				<label>User Address:</label>
		    				<input type="text" class="live24u form-control" ng-model="puser.address" required>
		    			</div>
	    				<input type="submit" value="Submit" class="live btn btn-success" ng-disabled="userForm.$invalid">
					</form>
	    		</div>
			</div>
			<div class="alert alert-success text-center" ng-show="success" style="margin-top: 22px">
				<button type="button" class="close" ng-click="messageCls()"><span aria-hidden="true">×</span></button>
				{{ comments }}
			</div>
		</div>
	</div>
</div>
<script src="index.js"></script>
</body>
</html>

angular.js

It Data contains simple index.js scripts.

Also Read :   Angularjs form ng-submit example

var userApp = angular.module('userApp', []);
userApp.controller('userCtrl', function($scope, $http){
    $scope.success = false;
 
    $scope.userFormSubmit = function(){
        console.log($scope.puser);
        $scope.success = true;
        $scope.comments = "User Form Submitted Successfully";
    }
 
    $scope.messageCls = function(){
        $scope.success = false;
    }
});

Note: simple HTML input All the fields are Two way Data bind to user object which can be get or fetch data fields access using $scope.user and then open your form submit, I Display this User object in the console or alert. You can then use see this User object to send to your PHP or any Web – API for Button Click or form submit action you want.

Also Read :   AngularJS Expressions - Dynamic Examples

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Submit a form using core AngularJS And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.