修改

Question

在用户注册Web表单中，我通过ajax验证DB中是否已存在用户名。当用户名已存在时，相应的input-text将转为.has-error类。

修改

我将ng-class属性更改为{'has-error':signup.userUnavaliable()}，但即使输入似乎没有得到这样的类，换句话说，邮件输入文本也没有变红。

我将指令放在包装器上，因为这是Bootstrap docs告诉它的方式。

这就是我的表单现在的样子：

<form class="form-inline" role="form">
  <div class="form-group" ng-class="{'has-error':signup.userUnavaliable()}">
    <input type="email" class="form-control input-lg" ng-model="signup.mail" placeholder="e-mail" ng-change="signup.userExists(signup.mail)">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" placeholder="Contraseña" ng-nodel="signup.password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="signup.role" value="admin"> Administrador
    </label>
  </div>
  <button type="submit" class="btn btn-primary" ng-disabled="signup.unavaliable">Registrar</button>
</form>

这是我的控制器：

app.controller('SignUpController',function ($scope, $http) {

    $scope.userUnavaliable = function() {

        return $scope.unavaliable
    }

    $scope.print = function(msg) {

        console.log(msg)
    }

    this.userExists = function(mail) {

        if (mail) {

            var who = $http.get("/existingUsers/"+mail)

            who.success(function(data,status, headers, config) {
                if (data.mail) {
                    $scope.unavaliable = true
                    console.log(data.mail + " ya existe en la DB")
                }
                else{
                    $scope.unavaliable = false
                }
            });

            who.error(function(data, status, headers, config) {
                    alert("AJAX failed!");
            })
        }

    }

})

另外，我正在尝试禁用该按钮并且它没有达到这样的效果，所以我认为我的控制器有任何问题。

Answer 1

如在bootstrap验证状态中给出的，如果您希望根据输入的验证状态更改标签颜色，则必须对其应用ng-class。

这是我写了一段时间的示例代码。请注意，要在表单元素上利用Angular JS验证状态，您需要为所有输入类型提供name。

此代码会根据验证状态将输入框加上标签颜色变为红色或绿色。

<div class="form-group" 
             ng-class="( newProfileForm.email.$dirty ? (newProfileForm.email.$valid ? 'has-success has-feedback' : 'has-error has-feedback' ) : ' ')"
             >

                <label class="col-sm-4 control-label">Email</label>

                <div class="col-sm-6">
                    <input type="email" name="email" class="form-control" ng-model="user.mail" ng-required='true'>    

                    <!-- Invalid Span -->           
                    <span ng-if='newProfileForm.email.$invalid && newProfileForm.email.$dirty' class="glyphicon glyphicon-remove form-control-feedback"></span>

                    <!-- Valid Span -->
                    <span ng-if='newProfileForm.email.$valid' class="glyphicon glyphicon-ok form-control-feedback"></span>
                    <p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty" class="bg-danger pad">Please enter valid email.</p>
                </div>           
        </div>

[编辑]名称属性的说明。 Angular使用name属性来确定输入控件的状态。因此，如果您有一个名为username的输入控件。甚至你的表单也应该有角度验证状态的名称。

AngularJS将使用fallowing变量来检查其验证状态。

formname.username.$valid =如果根据验证规则，用户名是正常的。

formname.username.$invalid =如果用户名无效

formname.username.$dirty =如果用户编辑了输入框

formname.username.$pristine =如果用户尚未编辑输入框。

Angular使用name属性进行验证。

如果您希望根据用户的可用性禁用您的按钮。使用像

这样的东西

<button class="btn btn-default" ng-disabled="unavaliable">Submit</button>

Answer 2

试

 <div class="form-group" ng-class="{'has-error':signup.userUnavaliable()}">

如何使用Angular JS和Bootstrap实现表单验证？

修改

2 个答案: