AngularJS Tutorial - Form validation and custom message








The following code shows how to set form validation and custom message.

Example


<!doctype html>
<html ng-app="myApp" >
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <style>
.error { border: dashed red 1px }
.success { border: dotted  green 1px }
</style>  <!--   w w  w  .jav  a 2s .c o m-->
  <script>
var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.getCssClasses = function(ngModelContoller) {
    return {
      error: ngModelContoller.$invalid && ngModelContoller.$dirty,
      success: ngModelContoller.$valid && ngModelContoller.$dirty
    };
  };
  
  $scope.showError = function(ngModelController, error) {
    return ngModelController.$error[error];
  };
});
  
  </script>
</head>
<body ng-controller="MainCtrl">
  <form name="userInfoForm">
  <div class="control-group" ng-class="getCssClasses(userInfoForm.email)">
    <label>E-mail</label>
    <input type="email" ng-model="user.email" name="email" required>
    <span ng-show="showError(userInfoForm.email, 'email')" class="help-inline">You must enter a valid email</span>
    <span ng-show="showError(userInfoForm.email, 'required')" class="help-inline">This field is required</span>
  </div>
  <label>Last name</label><br/>
  <input type="text" ng-model="user.lastName" name="lastName" required><br/>
  <label>First name</label><br/>
  <input type="text" ng-model="user.firstName" name="firstName" required><br/>
  <label>Website</label><br/>
  <input type="url" ng-model="user.website" name="website"><br/>
  <label>Description</label><br/>
  <textarea ng-model="user.description" name="description"></textarea><br/>
  <label>Password</label><br/>
  <input type="password" ng-model="user.password" name="password" required><br/>
  <label>Password (repeat)</label><br/>
  <input type="password" ng-model="repeatPassword" name="repeatPassword" required><br/>
  <label>Roles</label><br/>
  <label class="checkbox"><br/>
     <input type="checkbox" ng-model="user.admin" name="admin"> Is Administrator</label><br/>
  <button ng-click="save()" ng-disabled="!canSave()">Save</button>
  </form>

  User Model: <pre>{{user|json}}</pre>
  Form: <pre>{{userInfoForm|json}}</pre>
  
</body>
</html>

The code above is rendered as follows: