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

when validating form password did have password field required, applying conditions how many characters password must have ect, , can't seem part working.

i have function displays correct message user typing,

    $scope.$watch(         function ($scope, $rootscope) {              if ($scope.user.newpassword != 'undefined') {                 if ($scope.user.newpassword.length < 8) {                     $scope.errormessage = "your password must contain more 8 characters.";                     $scope.validpassword = false;                     return true;                 } else if (!authservice.regexppasswordvalidation().exec($scope.user.newpassword)) {                     $scope.errormessage = "your password not meet minimum password complexity. please make sure contains @ least 1 uppercase character, 1 lowercase character, 1 number, , 1 non-alphanumeric character.";                     $scope.validpassword = false;                     return true;                 } else {                     $scope.validpassword = true;                     return false;                 }             }         }     ); 

the problem submit button @ bottom of form still clickable has been typed, despite error message displaying correctly, not want.

here relevant sections of 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 best way of getting working?

it quite simple. ng-disabled along form invalid property, can check $scope.validpassword bellow.

here 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>