Update
I created jsfiddles to illustrate my problem as the question was not clear.
At first I thought that I could not deactivate form field validation, but I found out that this can be done using the ng-required directive.
http://jsfiddle.net/charms/YhVfN/23/
My actual problem is that the password fields are not reset. All other form fields are cleared, but password fields are not cleared.
To test this behavior, you can:
- Click "Add User"
- Add your email address, first name, last name, password and the wrong password to confirm.
- Click on the close button without saving
- Click on the edit button.
And then you will see that the password is still set. The $ setPristine method is not cleared. All other form fields are cleared.
http://jsfiddle.net/charms/eP7T8/61/
Previous (outdated question)
Does anyone know how I can deactivate validation for disabled fields? I am using angularjs 1.1.3.
When I create a new user, I would like to check all the fields, including the password fields. But when I edit the user, I would like the password fields to remain inactive and not checked if the user does not activate the fields above the checkbox.
My current problem is that if I set the password fields to ng-disabled = true, the check will still start. I thought ng-required = false might help, but that is not the case.
I set the password field to ng-disabled = true and ng-required = false.
<input type="password" name="password" ng-model="password" placeholder="Password" ng-disabled="true" ng-required="false" required/>
I set the password confirmation field to ng-disabled = true and ng-required = false.
<input type="password" name="passwordConfirm" ng-model="passwordConfirm" placeholder="Confirm Password" ng-disabled="true" ng-required="false" required field-equal="password"/>
But nevertheless the required and directives equal to the fields are checked. How can I prevent validation on these deactivated fields?
Below is my full code.
HTML:
<div id="user_list" class="listview_list"> <div id="user_row" class="listview_row" ng-repeat="u in users"> <div id="user_username" class="listview_column"><span class="listview_mainfield">{{u.email}}</span></div> <div id="user_firstname" class="listview_column">{{u.firstName}}</div> <div id="user_lastname" class="listview_column">{{u.lastName}}</div> <button class="listview_row_button" ng-click="deleteUser(u.id, $index)">Delete</button> <button class="listview_row_button" ng-click="showEditScreen(u.id, $index)">Edit</button> </div> </div> <div id="user_new" class="new_user"> <button class="new_user_button" ng-click="showAddScreen()">Add user</button> </div> <div id="user_mod" class="user_form" ng-show="userModScreenIsVisible"> <form name="mod_user" novalidate> <input type="email" name="email" ng-model="user.email" placeholder="E-Mail" ng-disabled="emailFieldDisabled" required email-available/> <div class="user-help" ng-show="mod_user.email.$dirty && mod_user.email.$invalid">Invalid: <span ng-show="mod_user.email.$error.required">Please enter your email.</span> <span ng-show="mod_user.email.$error.email">This is not a valid email.</span> <span ng-show="mod_user.email.$error.checkingEmail">Checking email...</span> <span ng-show="mod_user.email.$error.emailAvailable">Email not available</span> </div> <br/> <input name="firstName" ng-model="user.firstName" placeholder="Firstname" required/> <div class="user-help" ng-show="mod_user.firstName.$dirty && mod_user.firstName.$invalid">Invalid: <span ng-show="mod_user.firstName.$error.required">Please enter your firstname.</span> </div> <br/> <input name="lastName" ng-model="user.lastName" placeholder="Lastname" required/> <div class="user-help" ng-show="mod_user.lastName.$dirty && mod_user.lastName.$invalid">Invalid: <span ng-show="mod_user.lastName.$error.required">Please enter your lastname.</span> </div> <br/> <input type="checkbox" name="setPassword" ng-disabled="passwordCheckboxDisabled" ng-show="passwordCheckboxVisible"/> <span class="password_checkbox" ng-show="passwordCheckboxVisible">Change password</span> <br ng-show="passwordCheckboxVisible"/> <input type="password" name="password" ng-model="password" placeholder="Password" ng-disabled="passwordFieldDisabled" ng-required="passwordFieldRequired" required/> <div class="user-help" ng-show="mod_user.password.$dirty && mod_user.password.$invalid">Invalid: <span ng-show="mod_user.password.$error.required">Please enter a password.</span> </div> <br/> <input type="password" name="passwordConfirm" ng-model="passwordConfirm" placeholder="Confirm Password" ng-disabled="passwordFieldDisabled" ng-required="passwordFieldRequired" required field-equal="password"/> <div class="user-help" ng-show="mod_user.passwordConfirm.$dirty && mod_user.passwordConfirm.$invalid">Invalid: <span ng-show="mod_user.passwordConfirm.$error.required">Please enter a password.</span> <span ng-show="mod_user.passwordConfirm.$error.fieldEqual">Passwords do not match.</span> </div> <br/> <button class="button" ng-click="hideUserModScreen()">Close</button> <button class="button" ng-click="updateUserDetails()" ng-disabled="mod_user.$invalid" ng-show="updateUserDetailsButtonIsVisible">Update</button> <button class="button" ng-click="saveUserDetails()" ng-disabled="mod_user.$invalid" ng-show="saveUserDetailsButtonIsVisible">Save</button> </form> </div>
Controller:
'use strict'; /* * Controller to display and manipulate users. */ function UserCtrl($scope, User) { // initialize as invisible $scope.userModScreenIsVisible = false; $scope.updateUserDetailsButtonIsVisible = false; $scope.saveUserDetailsButtonIsVisible = false; $scope.passwordCheckboxVisible = false; // initialize as disabled or enabled $scope.emailFieldDisabled = false; $scope.passwordCheckboxDisabled = false; $scope.passwordFieldDisabled = false; // initialize required or not required $scope.passwordFieldRequired = false; // gather array index before opening edit // screen (used in updateUserDetails method) $scope.editIndex = null; // display list with users $scope.getList = function() { User.query( {}, //params function (data) { //success $scope.users = data.data; }, function (data) { //failure console.log("Error occurred while getting list of users"); }); } // execute getList() when partial is loaded $scope.getList(); // show edit screen if edit button is clicked $scope.showEditScreen = function(id, index) { $scope.user = User.get({userId: id}); $scope.editIndex = index; $scope.updateUserDetailsButtonIsVisible = true; $scope.userModScreenIsVisible = true; $scope.emailFieldDisabled = true; $scope.passwordCheckboxVisible = true; $scope.passwordFieldDisabled = true; $scope.passwordFieldRequired = false; $scope.passwordCheckboxDisabled = false; //console.log($scope.mod_user); } // show add screen if the add button is clicked $scope.showAddScreen = function() { $scope.user = new User(); $scope.saveUserDetailsButtonIsVisible = true; $scope.passwordCheckboxDisabled = true; $scope.passwordFieldRequired = true; $scope.userModScreenIsVisible = true; console.log($scope.mod_user); } // hide edit screen if close button is clicked $scope.hideUserModScreen = function() { $scope.updateUserDetailsButtonIsVisible = false; $scope.saveUserDetailsButtonIsVisible = false; $scope.userModScreenIsVisible = false; $scope.emailFieldDisabled = false; $scope.passwordFieldDisabled = false; $scope.passwordFieldRequired = false; $scope.passwordCheckboxVisible = false; $scope.passwordConfirm = ''; $scope.password = ''; $scope.mod_user.$setPristine(); } // update a user $scope.updateUserDetails = function() { $scope.user.$update(); angular.extend($scope.users[$scope.editIndex], $scope.user); $scope.editIndex = null; $scope.updateUserDetailsButtonIsVisible = false; $scope.userModScreenIsVisible = false; //console.log($scope.mod_user); } // save a new user $scope.saveUserDetails = function() { $scope.user.$create(); $scope.users.push($scope.user); $scope.saveUserDetailsButtonIsVisible = false; $scope.userModScreenIsVisible = false; } // delete a user $scope.deleteUser = function(id, index) { User.delete({userId: id}); $scope.users.splice(index, 1); $scope.userModScreenIsVisible = false; } }
directives:
'use strict'; /* Directives */ angular.module('myApp.directives', []). directive('appVersion', ['version', function (version) { return function (scope, elm, attrs) { elm.text(version); }; }]). /* * Validate if the email address is available. */ directive('emailAvailable', function($http) { // available return { require: 'ngModel', link: function(scope, elem, attr, ctrl) { // push the validator on so it runs last. ctrl.$parsers.push(function(viewValue) { // set it to true here, otherwise it will not // clear out when previous validators fail. ctrl.$setValidity('emailAvailable', true); if(ctrl.$valid) { // set it to false here, because if we need to check // the validity of the email, it invalid until the // AJAX responds. ctrl.$setValidity('checkingEmail', false); // check if email is available or used if(viewValue !== "" && typeof viewValue !== "undefined") { $http.get('/api/user/email/' + viewValue + '/available') .success(function(data, status, headers, config) { ctrl.$setValidity('emailAvailable', true); ctrl.$setValidity('checkingEmail', true); }) .error(function(data, status, headers, config) { ctrl.$setValidity('emailAvailable', false); ctrl.$setValidity('checkingEmail', true); }); } else { ctrl.$setValidity('emailAvailable', false); ctrl.$setValidity('checkingEmail', true); } } return viewValue; }); } }; }). /* * Validate if two fields are equal (such as passwords match for example */ directive('fieldEqual', [function() { return { require: 'ngModel', link: function(scope, elem, attr, ctrl) { ctrl.$parsers.push(function(viewValue) { ctrl.$setValidity('fieldEqual', true); if(ctrl.$valid) { scope.$watch(attr.fieldEqual, function() { var compareValue = this.last; if (viewValue !== compareValue) { ctrl.$setValidity('fieldEqual', false); return undefined; } else { ctrl.$setValidity('fieldEqual', true); return viewValue; } }); } }); } }; }]);