Question

我的表格如下 -

 <form class="form-horizontal register-form" name="register" ng-submit="registerUser();" novalidate>
     <div class="form-group">
        <label for="email" class="cols-sm-2 control-label">Your Email</label>

            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                <input type="email" class="form-control"  ng-model="user.email"  name="email" id="mail"  placeholder="Enter your Email"  required />
                 <i ng-show="register.email.$dirty && register.email.$invalid && !user.submit" class="error-icon glyphicon glyphicon-remove"></i>
                 <i ng-show="register.email.$valid" class="valid-icon glyphicon glyphicon-ok"></i>
            </div>
         <span class="error" ng-show="register.email.$dirty  && !user.submit && register.email.$invalid">Email field is required.</span>
           <span class="error" ng-show="register.email.$dirty && register.email.$error.email && register.email.$invalid">Email you entered is invalid.</span>
    </div>
    <div class="form-group">
        <label for="password" class="cols-sm-2 control-label">Password</label>

            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                <input type="password" class="form-control" ng-model="user.login_password" name="login_password" id="login_password"  placeholder="Enter your Password" required />
                 <i ng-show="register.login_password.$dirty && register.login_password.$invalid && !user.submit" class="error-icon glyphicon glyphicon-remove" ></i>
                 <i ng-show="register.login_password.$valid" class="valid-icon glyphicon glyphicon-ok"></i>
            </div>
            <span class="error" ng-show="register.login_password.$dirty && register.login_password.$error.required && !user.submit">Password field is required.</span>

    </div>

    <div class="form-group">
        <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>

            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                <input type="password"  ng-model="user.confirm_password" class="form-control" name="confirm_password" id="confirm_password"  placeholder="Confirm your Password" required />
                <i ng-show="user.login_password !== user.confirm_password" class="error-icon glyphicon glyphicon-remove"></i>
                 <i ng-show="register.confirm_password.$valid && user.login_password == user.confirm_password" class="valid-icon glyphicon glyphicon-ok"></i>
            </div>
            <span class="error" ng-show="register.confirm_password.$dirty && register.confirm_password.$error.required && !user.submit">Confirm password field is required.</span>
            <span class="error" ng-show="register.confirm_password.$dirty && user.login_password !== user.confirm_password">Confirm password does not match.</span>
    </div>

    <div class="form-group ">
     {{register.$invalid }} {{  disableButton}}  {{register.$invalid ==  disableButton}}
         <button type="submit" class="btn btn-primary login-button"  ng-disabled="register.$invalid"  id="button-register" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Registering..."><i class="fa fa-key" aria-hidden="true"></i> Register</button>

    </div>
</form>

这是我的控制者 -

 $scope.registerUser = function() {  
        $scope.user.created_at =  Math.round((new Date()).getTime() / 1000);
        $scope.user.updated_at =  Math.round((new Date()).getTime() / 1000);
        $scope.user.action =  'add';
        $("#button-register").button('loading');
         $http({
            method: 'POST',
            url: 'api/user.php/users/', 
             data: $scope.user ,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}

        })
        .success(function(data, status, headers, config) { 
            $("#button-register").button('reset');

            $scope.successMsg = 'Congratulation! you are registered successfully.';
            $scope.user={};
            $scope.user.submit=true;
            $scope.disableButton=true;
        })



     } // End of register function

一切正常，但是一旦我提交表单并清除输入字段，就会启用提交按钮。我试图在提交后打印{{register。$ invalid}}的值，这是真的（理想情况下，如果它是真的按钮应该被禁用）。但仍然启用了按钮。有人能指出我在哪里做错了吗？

Answer 1

我认为它与这一行有关：

$("#button-register").button('reset');

也许，它正在将提交更改为一个全新的按钮，类型为reset.And，因此在执行该语句后有ng-disabled标记。尝试删除此语句并查看禁用是否有效。

它也是一个jquery，在将它与angularjs组合时总会产生问题。如果是这样的话，请尝试将其放入

 $scope.$apply(function(){
 $("#button-register").button('reset');
 }

Angular JS：ng-disabled在提交后不禁用按钮

1 个答案: