Sunday, 3 May 2015

AngularJS Input Validation



AngularJS forms and controls can validate input data.

Input Validation:
AngularJS forms and controls can provide validation services, and notify users of invalid input.
Tips: Client-side validation cannot alone secure user input. Server side validation is also necessary.

Example Code:
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
<h2>Validation Example</h2>

<form  ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

<p>Username:<br>
  
<input type="text" name="user" ng-model="user" required>
  
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
    
<span ng-show="myForm.user.$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.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid"
>
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'Ravi Gupta';
    $scope.email = 'ravig.spm@gmail.com';
});
</script>

</body>
</html>

The HTML form attribute novalidate is used to disable default browser validation.

Example Explained:
The AngularJS directive ng-model binds the input elements to the model.
The model object has two properties: user and email.
Because of ng-show, the spans with color:red are displayed only when user or email is $dirty and $invalid.
Property
Description
$dirty
The user has interacted with the field.
$valid
The field content is valid.
$invalid
The field content is invalid.
$pristine
User has not interacted with the field yet.



AngularJS Forms



An AngularJS form is a collection of input controls.

HTML Controls:
HTML input elements are called HTML controls:
  • input elements
  • select elements
  • button elements
  • textarea elements

HTML Forms:
HTML forms group HTML controls together.

Exmaple Code:
<div ng-app="myApp" ng-controller="formCtrl">
  
<form novalidate>
    First Name:
<br>
    
<input type="text" ng-model="user.firstName"><br>
    Last Name:
<br>
    
<input type="text" ng-model="user.lastName">
    
<br><br>
    
<button ng-click="reset()">RESET</button>
  
</form>
  
<p>form = {{user}}</p>
  
<p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "Ravi", lastName: "Gupta"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>
The novalidate attribute is new in HTML5. It disables any default browser validation.

Example Explained:
The ng-app directive defines the AngularJS application.
The ng-controller directive defines the application controller.
The ng-model directive binds two input elements to the user object in the model.
The formCtrl function sets initial values to the master object, and defines 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.
The novalidate attribute is not needed for this application, but normally you will use it in AngularJS forms, to override standard HTML5 validation.