Home  >  Angular JS

AngularJS Form and Validation with Examples

December 29, 2014
In this page, we will learn AngularJS form and form validation. Form is the collection of HTML controls like input, select, button and textarea. All form controls are used to bind data by user. Form validation is to check user input true or false. It makes easy to handle client-side form validations without adding a lot of extra effort. AngularJS form validations are based on the HTML5 form validators.

AngularJS Form

An AngularJS form is a collection of controls. In form input, select, button and textarea element are called HTML controls. The HTML controls (input, select, textarea) are the ways for a user to enter data. AngularJS has some features for binding data of HTML form input fields to the model object. These features makes it easier to work with forms.
 <!DOCTYPE html>
<html lang="en">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="formController">
  <form novalidate>
    Website Name:
    <input type="text" ng-model="user.Website">
    Topic Name:
    <input type="text" ng-model="user.Topic">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>
<script>
function formController ($scope) {
    $scope.master = {Website:"Concretepage.com", Topic:"AngulatJS Form"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
}
</script>
</body>
</html>
Output is given as below.
AngularJS Form and Validation with Examples
In this example, inside div element the ng-app directive defines the AngularJS application and the ng-controller directive defines the application controller. Form is define inside div element. In example, I have defined two input element, one is website name and another topic name. In input element, data is bound by ng-model directives. The formController() function sets initial values to the master object, and invokes the reset() method. The reset() method sets the user object equal to the master object. The ng-click directive invokes the reset() method, only if the button is clicked.

AngularJS Form Handling

In AngularJS form we can bind an input field to a model property to use ng-model directive.

Checkbox Binding

In AngularJS form we can bind a checkbox () to a model property, the model property will be set to true if the checkbox is checked, and will b set to false if checkbox is unchecked. If you need other values instead of true and false inserted into your model, you can use the ng-true-value and ng-false-value directives.
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController" >
    <form>
     <input type="checkbox" ng-model="myForm.wantNewsletter" ng-true-value=" Checkbox is Checked " ng-false-value=" Checkbox is Unchecked " >
    </form>
    <div>
       {{myForm.wantNewsletter}}
    </div>
</div>
<script>
    angular.module("myApp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.myForm.wantNewsletter  = " Checkbox is Unchecked ";
            } );
</script>
</body>
</html>
Output -
AngularJS Form and Validation with Examples
Radio Buttons Binding

In AngularJS form radio buttons are also easy to bind to model properties. If you have a group of radio buttons, just bind them all to the same model property.
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController" >
    <form>
    Newspaper
    <input type="radio" ng-model="myForm.whichNewsletter" value="WeeklyNews">    
   <input type="radio" ng-model="myForm.whichNewsletter" value="MonthlyNews">  
    </form>
    <div>
       {{myForm.whichNewsletter}}
    </div>
</div>
<script>
    angular.module("myApp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.myForm.whichNewsletter  = "Please Select Radio Button";
            } );
</script>
</body>
</html>
Output is given as below.
AngularJS Form and Validation with Examples
Select Box Binding

In AngularJS form select boxes is bind to model properties.
<!DOCTYPE html>
<html>	
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController" >
    <form>
        <select ng-model="myForm.web">
            <option value="AngularJS">AngularJS</option>
            <option value="Jquery">Jquery</option>
            <option value="CSS3">CSS3</option>
        </select>
    </form>
    <div>
        {{myForm.web}}
    </div>
</div>

<script>
    angular.module("myApp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.myForm.web  = "Select Topic : ";
            } );
</script>
</body>
</html>
Output -
AngularJS Form and Validation with Examples

AngularJS Form Validation

AngularJS provide form element validation service, and check invalid input. It provides client-side validation and server side validation. We can write one or more input element for different type of data bind in HTML form, and every input required to check user input value true or false. If user input is true then validator will not show message, and if user input is false, validator show error message.
AngularJS provides basic implementation for most common HTML5 input types: (text, number, url, email, date, radio, checkbox), as well as some directives for validation (required, pattern, minlength, maxlength, min, max).
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>    
<body>
<h2>Validation Example</h2>
<form ng-app="" ng-controller="validateCtrl"  name="myForm" novalidate>

<p>First Name:<br>
<input type="text" name="fname" ng-model="fname" required>
<span style="color:red" ng-show="myForm.fname.$dirty && myForm.fname.$invalid">
<span ng-show="myForm.fname.$error.required">First name is required.</span>
</span>
</p>
<p>Last Name :<br>
<input type="text" name="lname" ng-model="lname" required>
<span style="color:red" ng-show="myForm.lname.$dirty && myForm.lname.$invalid">
<span ng-show="myForm.lname.$error.required">Last name is required.</span>
</span>
</p>
<p>Address :<br>
<input type="text" name="address" ng-model="address" required>
<span style="color:red" ng-show="myForm.address.$dirty && myForm.address.$invalid">
<span ng-show="myForm.address.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.fname.$dirty && myForm.fname.$invalid || myForm.lname.$dirty && myForm.lname.$invalid || myForm.address.$dirty && myForm.address.$invalid || myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
function validateCtrl($scope) {
    $scope.fname = 'M.kumar';
     $scope.lname = 'Rai';
     $scope.address = 'xxx xxx xxx';
    $scope.email = '[email protected]';
}
</script>
</body>
</html>
Output is given as below.
AngularJS Form and Validation with Examples
Happy Learning.
FIND MORE TUTORILAS


©2019 concretepage.com | Privacy Policy | Contact Us