AngularJS: 根据输入的内容使 a 无效

Question

在验证我的密码表单时，我之前只知道密码字段是必需的，但现在我正在对密码必须包含多少个字符等应用条件，但我似乎无法理解部分工作。

我有这个功能可以在用户输入时向他们显示正确的消息，

    $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;
                }
            }
        }
    );

这个问题是，尽管错误消息显示正确，但只要输入任何内容，表单底部的提交按钮仍然可以点击，这是我不想要的。

这是表格的相关部分，

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

关于实现此功能的最佳方式有什么想法吗？

Answer 1

很简单。对于 ng-disabled 以及您的表单无效属性，您还可以如下检查 $scope.validPassword。

这是编辑后的代码：

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

AngularJS: 根据输入的内容使 a 无效

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

forms

controller

angularjs