AngularJS Tutorial - Disable form submit button








The following code shows how to disable form submit button.

Example


<!DOCTYPE html>
<html  ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
  <script>
var app = angular.module('myApp', []);
<!-- w w  w .  ja va 2  s .  com-->
app.controller('MainCtrl', function($scope) {

  $scope.canSave = function() {
    return $scope.userInfoForm.$dirty && $scope.userInfoForm.$valid;
  };
});
  
  </script>
</head>
<body ng-controller="MainCtrl">
  <form name="userInfoForm">
  <label>E-mail</label>
  <input type="email" ng-model="user.email" name="email">
  <label>Last name</label>
  <input type="text" ng-model="user.lastName" name="lastName">
  <label>First name</label>
  <input type="text" ng-model="user.firstName" name="firstName">
  <label>Website</label>
  <input type="url" ng-model="user.website" name="website">
  <label>Description</label>
  <textarea ng-model="user.description" name="description"></textarea>
  <label>Password</label>
  <input type="password" ng-model="user.password" name="password">
  <label>Password (repeat)</label>
  <input type="password" ng-model="repeatPassword" name="repeatPassword">
  <label>Roles</label>
  <label class="checkbox"><input type="checkbox" ng-model="user.admin" name="admin"> Is Administrator</label>
  <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: