Question

我有这种模态形式来获取用户的输入。在提交用户表单之前，我想检查用户是否输入了用户名，密码，确认密码，状态和范围。请注意，状态位于单选按钮中，范围位于复选框中。

但我现在遇到的问题是，用户仍然可以单击按钮保存，它不会像我上面描述的那样检查条件。

  <div class="modal-body">
            <form name="addUser" ng-submit="(addUser.username.$valid && addUser.name.$valid && addUser.password.$valid &&
                        addUser.confirmpassword.$valid && addUser.status.$valid && addUser.scope.$valid) ? add() : '';">
                <div class="alert alert-danger" ng-if="hasError">
                    <button type="button" class="close" aria-hidden="true" ng-click="setError(false);">&times;</button>
                    <strong>Error!</strong> {{errorMessage}}
                </div>
                <div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
                  <label class="control-label" for="username">Username</label>
                  <input class="form-control" name="username" ng-model="user.username" required>
                  <span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
                  <label class="control-label" for="name">Name</label>
                  <input class="form-control"  name="name" ng-model="user.name" required>
                  <span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';">
                    <label class="control-label" for="password">Password</label>
                    <input type="password" class="form-control" name="password"
                           ng-model="user.password" required ng-minlength="5">
                    <span class="glyphicon form-control-feedback"
                          ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';">
                    <label class="control-label" for="confirmpassword">Re-enter password</label>
                    <input type="confirmpassword" class="form-control" name="confirmpassword"
                           ng-model="user.confirmpassword" required ng-minlength="5">
                    <span class="glyphicon form-control-feedback"
                          ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
                </div>
                <div class="form-group has-feedback" ng-class="addUser.status.$valid ? 'has-success' : 'has-error';">
                    <label for="status">Status</label><br>
                    <input type="radio" ng-model="user.status" name="status" value="1"> Active
                    <input type="radio" ng-model="user.status" name="status" value="0"> Inactive<br>
                </div>
                <br>
                <div class="form-group has-feedback" ng-class="addUser.scope.$valid ? 'has-success' : 'has-error';">
                    <label for="scope">Scope</label><br>
                    <input type="checkbox" ng-model="user.scope.admin" name="scope[]" value="admin"> Admin <br>
                    <input type="checkbox" ng-model="user.scope.app" name="scope[]" value="app"> App <br>
                    <input type="checkbox" ng-model="user.scope.redemption" name="scope[]" value="redemption"> Redemption <br>
                    <br>
                </div>
                <div ng-switch on="isLoading">
                    <div ng-switch-when="true">
                        <button type="button" class="btn btn-primary btn-block disabled">Saving ...</button>
                    </div>
                    <div ng-switch-when="false">
                        <button type="submit" class="btn btn-primary btn-block" ng-click="add();" >Save</button>
                    </div>
                </div>
            </form>
        </div>

Answer 1

没有对此进行测试，但看起来你的ng模型正在使用一个对象'user'来捕获每个属性，而你的ng-submit条件却没有考虑到这一点。不确定这是否是问题，但这是一回事你可能想检查一下。

看起来你也可以做像addUser这样的事情。$有效而不是做全面检查。您还可以尝试使用

禁用提交按钮

NG-禁用= “ADDUSER。$无效”。

这是一个教程：https://scotch.io/tutorials/angularjs-form-validation

提交前表格输入检查

1 个答案: