article

Friday, September 4, 2015

AngularJS Forms Custom Model Update Triggers

AngularJS Forms Custom Model Update Triggers

The novalidate attribute

1. updateOn option of the ng-model-options directive. The model value updates when the focus is lost.
2. debounce option delays the model update. update the model after 250 milliseconds
3. updateOn and debounce option. Setting the debounce value of blur event to ‘0’ indicates that the model trigger immediate update when it is out of focus.
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>AngularJS Custom Model Update</title>  
 </head>
 <body ng-app="formApp">
  <div ng-controller="FormController">
   <form novalidate>
    Name : <input type="text" ng-model="employee.name" ng-model-options="{updateOn:'blur'}"/></br>
    Gender : <input type="text" ng-model="employee.gender" ng-model-options="{debounce:250}"/></br>
    E-mail : <input type="email" ng-model="employee.email" ng-model-options="{updateOn:'blur',debounce:{blur:0} }"/></br>
   </form>
     <p>Name : {{employee.name}}</p>
   <p>Gender : {{employee.gender}}</p>
   <p>Email : {{employee.email}}</p>
  </div>
  </div>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <script type="text/javascript">
  var app = angular.module('formApp', []);
  app.controller('FormController', function($scope) {
   $scope.employee = {};

  });
 </script>
</body>
</html>

Related Post