In angular, a form is a collection of controls. Controls (such as, input, select, textarea, button) are the ways to interact with the form.
In AngularJS, we use ng-model to access user’s data. We bind input field to a model property using ng-model.
ng-model binds input fields of the form to the object of the model ($scope) synchronously, means the value in the scope object of the model and in the form of view will be same.
Watch the live demo or download code from the link given below.
Note: ng-model: ng-model provides two-way data binding. It binds the value of the form to the model object ($scope), then it’ll be accessible at the model and view synchronously, It means when the value at the form will change at the same time the value at the model object will get changed.
Creating an Application:
Here, we are going to create an application in which we will use the form-data at the model side after clicking the Submit button.
To fetch the data at the model, we will use ng-model and $scope object of the model.
HTML File: index.html
This file makes the form in front of user and binds it’s input fields from the model object($scope) using ng-model.
<html>
<head>
<title>AngularJS Forms</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<style>
</style>
</head>
<body class="container">
<div class="row" ng-app="myApp" ng-controller="maincntrl">
<h2 class="col-md-offset-3 col-md-6 col-sm-12"> <center>AngularJS - Form <center></h2>
<div class="col-md-offset-3 col-md-6 col-sm-12" style="margin-top:10px;">
<div class="login">
<h2>Contact Form</h2>
<form class="form-horizontal">
<div class="form-group" >
<label id="label" class="control-label">First Name:</label>
<input type="text" class="form-control" ng-model="user.firstname" placeholder="Enter First Name">
</div>
<div class="form-group">
<label id="label" class="control-label">Email:</label>
<input type="email" class="form-control" ng-model="user.email" placeholder="Enter Email Address">
</div>
<div class="form-group">
<label id="label" class="control-label">Message:</label>
<textarea type="textarea" rows="2" cols="50" class="form-control" ng-model="user.message" placeholder="Enter Your Message"></textarea>
</div>
<div class="form-group">
<input class="btn btn-warning" type="submit" ng-click="call()" value="Submit">
</div>
<h3 class="text-center"> Entered Values:</h3>
<p><b>First Name :</b> {{user.firstname}}<br>
<b>Email: </b>{{user.email}}<br>
<b>Message: </b>{{user.message}}
</p>
</form>
</div>
<div class="alert" ng-show="submit_success">
<h3 class="text-center"> Submited Values:</h3>
<p><b>First Name :</b> {{server.firstname}}<br>
<b>Email: </b>{{server.email}}<br>
<b>Message: </b>{{server.message}}<br>
<b>JSON Data: </b>{{server}}
</p>
</div>
</div>
</div>
</body>
</html>Note: Here in above code we can see that ng-model is attached with the form controls. By which the value of input field is get inserted as the property of user object
JavaScript File: app.js
var myApp = angular.module("myApp", []);
myApp.controller("maincntrl", function ($scope) {
$scope.submit_success = false;
$scope.call = function () {
$scope.server = angular.copy($scope.user);
$scope.submit_success = true;
}
}
);CSS File: style.css
/*----------------------------------------------
css settings for HTML div exactCenter
------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
.h1 {
margin: 40px auto !important;
}
.login h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
.login hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 10px;
}
.login{
width:100%;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 40px;
word-wrap: break-word;
}
.login p{
margin-top:8px;
font-size:16px;
}
.login hr {
margin-bottom: 30px;
}
input[type=text]{
width:99.5%;
padding: 10px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
label#label{
margin-bottom:10px;
font-size:18px;
font-weight:bold;
}Events:
Here in this application, we have used a Event Listener Directives ng-click with a function means after clicking on it, it will call that function.
There are some of Angularjs event listener directives which are used with html dom as an event listener
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
Note: These event listeners directives are get attached with the HTML dom and will call the corresponding function when that event triggers.
Conclusion
I hope that now you are feeling yourself comfortable with AngularJS form and AngularJS event listener. Please share your feedback in the space given below. Keep visiting our website for further coding tricks.
