AngularJS: Making a from invalid based upon contents of an input - angularjs

Question

When validating my form for a password I did previously just have that the password field was required, but now that I am applying conditions to how many characters the password must have ect, and I can't seem to get this part working.
I have this function that displays the correct message to the user as they are typing,
$scope.$watch(
function ($scope, $rootScope) {
if ($scope.user.NewPassword != 'undefined') {
if ($scope.user.NewPassword.length < 8) {
$scope.errorMessage = "Your password must contain more than 8 characters.";
$scope.validPassword = false;
return true;
} else if (!authService.regExpPasswordValidation().exec($scope.user.NewPassword)) {
$scope.errorMessage = "Your password does not meet the minimum password complexity. Please make sure it contains at least 1 uppercase character, 1 lowercase character, 1 number, and 1 non-alphanumeric character.";
$scope.validPassword = false;
return true;
} else {
$scope.validPassword = true;
return false;
}
}
}
);
The problem with this is that the submit button at the bottom of the form is still clickable as soon as anything has been typed, despite the error message displaying correctly, which I do not want.
Here are the relevant sections of the form,
<div class="form-group required" ng-show="!user.CtsAccount">
<label for="inputPassword" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password" ng-required="!user.CtsAccount && FormTitle=='Add User'" ng-model="user.NewPassword">
</div>
</div>
<div ng-show="!userForm.password.$pristine">
<div class="alert alert-dismissible alert-warning" ng-show="!validPassword">
<p>{{errorMessage}}</p>
</div>
</div>
--
<div class="modal-footer">
<button type="submit" ng-click="save()" ng-if="user.Id" ng-disabled="userForm.$invalid" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save User</button>
<button type="submit" ng-click="add()" ng-if="!user.Id" ng-disabled="userForm.$invalid" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Add User</button>
<button ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
Any ideas about the best way of getting this working?

Answer 1

It is quite simple. For the ng-disabled along with your form invalid property, you can also check $scope.validPassword as bellow.
Here is the edited code:
<div class="modal-footer">
<button type="submit" ng-click="save()" ng-if="user.Id" ng-disabled="userForm.$invalid || !$scope.validPassword" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save User</button>
<button type="submit" ng-click="add()" ng-if="!user.Id" ng-disabled="userForm.$invalid || !$scope.validPassword" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Add User</button>
<button ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>