AngularJS Create Web Forms

ASH

4 years ago

Forms are the fundamental elements of any web application which involves user inputs. Forms are used when we want to accept some data from users like user-registration, medical-form, vehicle-registration, etc. HTML elements, Javascripts, server-side code, css, media (like images, short-sound clip) constitutes a Web form. Web forms generally are made up of:

text-boxes,
select – Dropdown List
button
text-area (for address, remarks)

AngularJS Web Forms:

Here, we will create a basic user registration form and parse the user-input using AngularJS and also create few control using AngularJS. We will use AngularJS service to display user’s data from our form. Also Bootstrap CSS is used to styling.

Example:

<html>
<head>
<title>AngularJS - Web Forms</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #fcfcfc;">

<div ng-controller="myController">

<form ng-submit="submitForm()">
<h2>Job Application:</h2>
<table class="table table-condensed" style="width:500px;">
<tr>
<td>Name: </td>
<td>
<input type="text" maxlength="50" ng-model="details.name" />
</td>
</tr>
<tr>
<td>Address: </td>
<td>
<textarea maxlength="500" ng-model="details.address" ></textarea>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select ng-model="details.gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">Others</option>
</select>
</td>
</tr>
<tr>
<td>Level:</td>
<td>
<p><input type="radio" name="level" value="Fresher" ng-model="details.level" />&nbsp;Fresher</p>
<p><input type="radio" name="level" value="Experienced" ng-model="details.level" />&nbsp;Experienced</p>
</td>
</tr>
<tr>
<td>Date of Birth:</td>
<td><input type="date" ng-model="details.dob"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" name="Submit" class="btn btn-success"/>
<input type="button" value="Clear" name="Clear" ng-click="clear()" class="btn btn-danger"/>
</td>
</tr>
</table>
</form>

</div>

<script>
var app = angular.module("myApp",[]);
app.controller('myController', function ($scope, $http) {

$scope.details = {
"name": "",
"address": "",
"level": "",
"gender": "",
"dob":""
};

$scope.submitForm = function () {
window.alert("You entered: \r\nName: " + $scope.details.name + "\r\nAddress: " + $scope.details.address + "\r\nLevel: " + $scope.details.level +
"\r\nGender: " + $scope.details.gender + "\r\nDate of Birth: " + $scope.details.dob);
///Call a web api to post data to the server.
};

$scope.clear = function ()
{
$scope.details = {
"name": "",
"address": "",
"level": "",
"gender": "",
"dob": ""
};
}
});
</script>
</body>
</html>

VIEW DEMO

OUTPUT: