Nabajit Roy Nabajit Roy - 1 year ago 139
AngularJS Question

Angular JS: ng-disabled not disabling button after submit

I have a form like below-

<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="" name="email" id="mail" placeholder="Enter your Email" required />
<i ng-show="$dirty &&$invalid && !user.submit" class="error-icon glyphicon glyphicon-remove"></i>
<i ng-show="$valid" class="valid-icon glyphicon glyphicon-ok"></i>
<span class="error" ng-show="$dirty && !user.submit &&$invalid">Email field is required.</span>
<span class="error" ng-show="$dirty &&$ &&$invalid">Email you entered is invalid.</span>
<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>
<span class="error" ng-show="register.login_password.$dirty && register.login_password.$error.required && !user.submit">Password field is required.</span>


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


Here is my conroller-

$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';
method: 'POST',
url: 'api/user.php/users/',
data: $scope.user ,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}

.success(function(data, status, headers, config) {

$scope.successMsg = 'Congratulation! you are registered successfully.';

} // End of register function

Everything works fine, but once I submit the form and clear the input fields the submit button is enabled. I tried to print the value of {{register.$invalid }} after submit which is true(ideally if it is true button should be disabled). but still the button is enabled. Can someone point me where I am doing wrong?

Answer Source

I think it has something do with this line :


Maybe ,it's changing the submit into a whole new button with type reset.And so there is ng-disabled tag after the execution that statement.Try removing this statement and to see if the disable works without it.

Also its a jquery,which can always create a problem when it comes to combining it with angularjs.If that is the case try putting it in

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download