Creating Advanced Forms
The ng-class directive will update the CSS classes on div that contains the label, the
input, and the help text. It calls the getCssClasses() method, passing in an object
and an error name.
The object parameter is actually the ngModelController, which
has been exposed on the ngFormController, which in turn is
exposed on the scope.userInfoForm.email scope.The getCssClasses() method returns an object that defines which CSS classes should
be added. The key of each object refers to the name of a CSS class. The value of each
member is true if the class is to be added. In this case getCssClasses() will return
error if the model is dirty and invalid and success if the model is dirty and valid.
Disabling the save button
We can disable the save button when the form is not in a state to be saved.
<form name="userInfoForm">
...
<button ng-disabled="!canSave()">Save</button>
</form>In our view, we add a Save button with an ngDisabled directive. This directive
will disable the button whenever its expression evaluates to true. In this case it is
negating the result of calling the canSave() method. We provide the canSave()
method on the current scope. We will do this in our main controller:
app.controller('MainCtrl', function($scope) {
$scope.canSave = function() {
return $scope.userInfoForm.$dirty &&
$scope.userInfoForm.$valid;
};
});Try it at http://bit.ly/123zIhw.
The canSave() method checks whether the userInfoForm has the $dirty and
$valid flags set. If so, the form is ready to save.