How to Submit Simple Form in Angular
-
the Simple Form Submit Using the
ng-modelMethod in Angular -
the Simple Form Submit Using the
ng-submitMethod in Angular
While it is pretty simple to submit forms in regular HTML, it can be quite an ordeal for Angular. Angular would constantly interrupt form submissions to give you the chance to manipulate the data before you submit.
We will look at methods that will enable successful form submission on AngularJS.
First, we will look at the ng-model method, which collects all the data in an input or text area and make it into an item that the user can view.
However, the ng-submit method offers us more control over the data that we submit. If there is no action or item in an input, ng-submit prevents the form from submission.
Remember, we are dealing with AngularJS here, not the regular Angular. Thus, we will work mainly with the HTML and app.js.
the Simple Form Submit Using the ng-model Method in Angular
For the ng-model method, we will set up the HTML like this:
<div ng-app="myApp">
<form name="saveTemplateData" action="#" ng-controller="FormCtrl">
First name: <br /><input type="text" name="form.firstname" /> <br /><br />
Email Address: <br /><input type="text" ng-model="form.emailaddress" />
<br /><br />
<textarea rows="3" cols="25">
Describe your reason for submitting this form </textarea
>
<br /><br />
<input type="radio" ng-model="form.gender" value="female" />Female
<input type="radio" ng-model="form.gender" value="male" />Male <br />
<br /><br />
<input type="checkbox" ng-model="form.member" value="true" /> Already a
member <input type="checkbox" ng-model="form.member" value="false" /> Not a
member
<br /><br />
<input type="file" ng-model="form.file_profile" id="file_profile" /><br />
<input type="file" ng-model="form.file_avatar" id="file_avatar" />
<br /><br />
<input type="submit" ngClick="Submit" />
</form>
</div>
Then in the app.js, we write these codes:
import angular from 'angular';
import '@uirouter/angularjs';
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
$scope.data = {
firstname: 'default',
emailaddress: 'default',
gender: 'default',
member: false,
file_profile: 'default',
file_avatar: 'default',
};
$scope.submitForm = function () {
console.log('posting data....');
$http
.post(
'http://posttestserver.com/post.php?dir=jsfiddle',
JSON.stringify(data)
)
.success(function () {
/*success callback*/
});
};
});
The $scope.data is where all the data is stored for submission.
the Simple Form Submit Using the ng-submit Method in Angular
The ng-submit offers much fewer and straightforward coding.
For the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Form input text</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="submit(form)" >
Firstname: <input type="text" ng-model="form.firstname" /><br />
Lastname: <input type="text" ng-model="form.lastname" /><br />
<hr />
<input type="submit" value="Submit" />
</form>
<hr />
<p>Firstname: {{ form.firstname }}</p>
<p>Lastname: {{ form.lastname }}</p>
<pre>Submit Form: {{ formData }} </pre>
</div>
</body>
</html>
Then in the app.js:
import angular from 'angular';
import '@uirouter/angularjs';
var app = angular.module('myApp', []);
app.controller('myCtrl', [
'$scope',
function ($scope) {
$scope.submit = function (formData) {
$scope.formData = formData;
console.log(formData); // object
console.log(JSON.stringify(formData)); // string
};
},
]);
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn