ng-disable not working for hide submit button - angularjs

Hi I have a problem with ng-disabled for my submit button. Here is my code:
<div class="container">
<form class="form-login" role="form" name="form">
<h2 class="form-login-heading">Sign up</h2>
<br />
<input type="text" class="form-control" placeholder="Username" name="username" data-ng-model="registration.username" ng-minlength="5" ng-maxlength="20" ng-pattern="/^[A-z][A-z0-9]*$/" required />
<span ng-show="form.username.$error.required && form.username.$dirty">required</span>
<br />
<input type="password" id="password" class="form-control" placeholder="Password" name="password" data-ng-model="registration.plainPassword" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required />
<span ng-show="form.password.$error.required && form.password.$dirty">required</span>
<br />
<input type="password" id="password_c" class="form-control" placeholder="Confirm password" name="password_c" data-ng-model="registration.password_c" valid-password-c required />
<br />
<input type="email" id="email" class="form-control" placeholder="email" name="email" data-ng-model="registration.email" required>
<span ng-show="form.email.$error.required && form.email.$dirty">required</span>
<br />
<button class="btn btn-lg btn-info btn-block" type="submit" ng-disabled="form.$invalid" data-ng-click="signUp()">Submit</button>
<div data-ng-hide="message == ''" data-ng-class="(savedSuccessfully) ? 'alert alert-success' : 'alert alert-danger'">
{{message}}
</div>
</form>
I tried ng-disabled="!form.$valid" but the code is still not working. Console doesn't show any error. Can someone help me? Thank you

we solve the problem, thnx to #Silvinus, he save my life and time
The problem was in my directive, for password confirmation. I forget add return. This is how it looks
.directive('validPasswordC', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.form.password.$viewValue
ctrl.$setValidity('noMatch', !noMatch);
return viewValue; //this is what i forget to add
});
}
};
});

I copied your code and it working for me. Maybe the directive 'valid-password-c' if wrong.

Related

Angular ng-disabled is not working

Why is my button not enabling and disabling with this code:
<form name="formSendEmail" ng-submit="sendEmailAction();">
<div class="form-group">
<label class="label label-muted" for="visitorEmailForSendEmail">Visitor E-mail</label>
<input type="email" value="{{visitorDetail2.EmailAddress}}" id="visitorEmailForSendEmail" name="visitorEmailForSendEmail" class="form-control" ng-required="true" />
</div>
<input type="submit" class="btn btn-primary" value="Send E-mail" ng-disabled="formSendEmail.$invalid" />
</form>
Just above that code I have another form with a name of formCreateItinerary and I change my ng-disabled to point to that form; the enabling and disabling of the button works.
I have used this code too:
<input type="submit" class="btn btn-primary" value="Send E-mail" ng-disabled="visitorEmailForSendEmail == undefined || visitorEmailForSendEmail == ''" />
With this code, the button is disabled and does not enable. Can you help?
Try Changing the value="{{visitorDetail2.EmailAddress}}" to ng-model="visitorDetail2.EmailAddress"
<input type="email" ng-model="emailAddress" ng-change="validateEmail(emailAddress)" id="visitorEmailForSendEmail" name="visitorEmailForSendEmail" class="form-control" ng-required="true" />
<button ng-disabled="disableButton">button</button>
$scope.validateEmail=function(email) {
if(!validateEmail(email)){
$scope.disableButton=true;
}else{
$scope.disableButton=false;
}
}
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}

How to check for confirm password in the signup page using angularjs

I'm trying to write code for checking confirm password using angularjs.Can anyone please help me out regarding this issue ...
My signUp.html:
<html ng-app="Sample">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/custom.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-animate.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/script.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular-messages.js"></script>
</head>
<body>
<div class="container" id="wrapper1" align="center" ng-controller="RegistrationController as registration" >
<div>
<img id="logoDiv" src="../images/favicon.png">
</div>
<div id="loginDiv">
<h2>Sign up</h2>
<form>
<input type="text" class="resizedTextbox" ng-model="email" placeholder="Email" /><br> <br>
<input type="text" class="resizedTextbox" placeholder="Password" /><br><br>
<input type="text" class="resizedTextbox" placeholder="Verify Password" /><br><br>
<a href="#/signUp"> <button class="resizedBtn" value="SIGN UP">SignUp
</button></a>
</form>
</div>
</div>
</body>
</html>
I've had the same question as you, and found a great answer here. I used the 'nxEqual' directive and my form inputs look like this:
<input type="password" name="password" ng-model="user.password" placeholder="Password"
ng-required="true"
ng-minlength="8">
<input type="password" name="passwordConfirm" ng-model="user.passwordConfirm" placeholder="Confirm Password"
ng-required="true"
ng-minlength="8"
nx-equal="user.password">
To display a message like "Passwords do not match", i used this line ("signUpForm" is the name of myform.):
<div ng-show="signUpForm.passwordConfirm.$error.nxEqual"> Passwords do not match.</div >
You can assign a ng-model to both password fields , and below the text fields use an ng-show with condition that if both password match then show success message
<form>
<input type="text" class="resizedTextbox" ng-model="email" placeholder="Email" /><br> <br>
<input type="text" class="resizedTextbox" ng-model="password" placeholder="Password" /><br><br>
<input type="text" class="resizedTextbox" ng-model="verify-password" placeholder="Verify Password" /><br><br>
<div ng-show="password === verify-password" > password matched </div>
<a href="#/signUp"> <button class="resizedBtn" value="SIGN UP">SignUp
</button></a>
</form>
similarly you can use ng-hide to show error message
Use like this by using custom directive "verifyPassword" & use form_name.password2.$error.noMatch property in ng-show, to display the error:
<input type="password" name="password" class="form-control" placeholder="Enter password"/> // password html
<input verifyPassword type="text" name="password2" class="resizedTextbox" placeholder="Verify Password"/> //confirm password html
And use this directive,
Buyer.directive('verifyPassword', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.regForm.password.$viewValue
ctrl.$setValidity('noMatch', !noMatch)
return (noMatch)?noMatch:viewValue;
})
}
}
});

How to show different type of custom messages at input in form validation with angularjs

I have built a from and trying to implement validation process with angularjs. At my source code, you will see I have three input fields:
Email
Password
Confirm Password
At Email, I can show a 'Required message' and a 'Custom Message' by doing this:
<input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email" ng-model="email" required>
<p ng-show="createLogin.inputEmail.$error.required">This field is required</p>
<p ng-show="createLogin.inputEmail.$error.email">Enter a valid email<p>
This is completely fine. But, following the same procedure at other two input fields(Password & Confirm Password), I can't show the 'Custom Messages'! Only 'Required Messages' are shown. How can I fix this? This is the code which I have used for password:
<input type="password" class="form-control" id="createPassword" name="createPassword" placeholder="Password" ng-model="password" password-validate required>
<div ng-show="createLogin.createPassword.$error.required"><p>This field is required</p></div>
<div ng-show="createLogin.createPassword.$error.password">
<p>Custom Messages:</p>
</div>
And for Confirm Password:
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="Password" ng-model="verifyPass" required data-password-verify="password">
<p ng-show="createLogin.confirmPassword.$error.required">This field is required</p>
<p ng-show="createLogin.confirmPassword.$error.verifyPass">Password don't match<p>
So, how can I show the Custom Messages for Password and Confirm Password filed too like Email filed?
Here is my Plunker work
Since your custom directive set validation key to pwd (ctrl.$setValidity('pwd', true)) you need to use it in HTML in expressions like:
<div ng-show="createLogin.createPassword.$error.pwd">
<p>Password must meet the following requirements:</p>
<ul>
<li ng-class="pwdHasLetter">At least <strong>one letter</strong></li>
<li ng-class="pwdHasNumber">At least <strong>one number</strong></li>
<li ng-class="pwdValidLength">Be at least <strong>8 characters</strong></li>
</ul>
</div>
The same issue with password verification field, key should be passwordVerify:
<p ng-show="createLogin.confirmPassword.$error.passwordVerify">Password don't match</p>
Demo: http://plnkr.co/edit/zMbCxcdkYggOdvXYkMX1?p=preview
Please have a look at the below link
http://plnkr.co/edit/iSFp3n4PSDTM6pRofXc2
Following is the directive for matching passwords.
Directive
app.directive('pwdMatch', function () {
return {
require: 'ngModel',
restrict: 'A',
scope: {
pwdMatch: '='
},
link: function (scope, elem, attrs, ctrl) {
scope.$watch(function () {
var modelValue = ctrl.$modelValue || ctrl.$$invalidModelValue;
return (ctrl.$pristine && angular.isUndefined(modelValue)) || scope.pwdMatch === modelValue;
}, function (currentValue) {
ctrl.$setValidity('pwdMatch', currentValue);
});
}
};
})
HTML
<div class="form-group">
<label for="password" class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="password" placeholder="Enter password"
ng-model="user.password" name="password" required="true"
ng-pattern="/^(?=.*[0-9])(?=.*[A-Za-z])[a-zA-Z0-9~!##$%^&*]{6,15}$/">
<span ng-show="signUpForm.password.$dirty && signUpForm.password.$error.required">
<small class="text-danger">Please enter a password.</small>
</span>
<span ng-show="signUpForm.password.$dirty && !signUpForm.password.$error.required && signUpForm.password.$error.pattern">
<small class="text-danger">Password should have 6 to 15 characters with alphabets and digits</small>
</span>
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-sm-4 control-label">Confirm Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" name="confirmPassword" id="confirmPassword"
placeholder="Confirm password" ng-model="user.confirmPassword" required="true"
data-pwd-match="user.password">
<span ng-show="signUpForm.confirmPassword.$dirty && (signUpForm.confirmPassword.$error.required || signUpForm.confirmPassword.$error.pwdMatch)">
<small class="text-danger">Passwords do not match.</small>
</span>
</div>
</div>
Hope this is what you are looking for.

I cannot valid a form with password and password confirm with angular 1.3.2

I have a register form with input password and passwordConfirm as follow :
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="inputPassword" id="inputPassword" ng-minlength=8 placeholder="Password" ng-model="user.password" required>
</div>
<!-- error -->
<div class="error" ng-show="userForm.inputPassword.$dirty && userForm.inputPassword.$invalid">
<small class="error" ng-show="userForm.inputPassword.$error.required"> Your password is required. </small>
<small class="error" ng-show="userForm.inputPassword.$error.minlength"> Your password is required to be at least 8 characters </small>
</div>
</div>
<div class="form-group">
<label for="inputPassword2" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Check your password" ng-model="passwordConfirm" required pw-check="user.password">
</div>
<!-- error -->
<div class="error" ng-show="userForm.passwordConfirm.$dirty && userForm.passwordConfirm.$invalid">
<small class="error" ng-show="userForm.passwordConfirm.$error.noMatch"> Passwords don't match </small>
</div>
</div>
In Chrome console, when the input are pristine (not yet filled), this is how it's look passwordConfirm:
<input type="password" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" name="passwordConfirm" id="passwordConfirm" placeholder="Check your password" ng-model="passwordConfirm" required="" pw-check="user.password">
When i fill the password, i have the following error classes :
<input type="password" class="form-control ng-invalid ng-dirty ng-invalid-parse ng-valid-no-match ng-touched" name="passwordConfirm" id="passwordConfirm" placeholder="Check your password" ng-model="passwordConfirm" required="" pw-check="user.password">
What is the ng-invalid-parse ? I did not find documentation on it. I think this parse error causes ng-invalid so my form is invalid.
pw-check is a directive defined as follow :
app.directive('pwCheck', [function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.userForm.inputPassword.$viewValue
ctrl.$setValidity('noMatch', !noMatch)
})
}
}
}]);
How to resolve it please ?

AngularJS password confirmation noMatch not working?

I have this script here:
angular.module('UserValidation', []).directive('validPasswordC', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue, $scope) {
var noMatch = viewValue != scope.signupForm.password.$viewValue
ctrl.$setValidity('noMatch', !noMatch)
})
}
}
});
And here's the html:
<div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
<label>Password</label>
<input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />
<p ng-show="signupForm.password.$error.required" class="error">*</p>
<p ng-show="signupForm.password.$error.minlength" class="error">
Passwords must be between 8 and 20 characters.</p>
<p ng-show="signupForm.password.$error.pattern" class="error">
Must contain one lower & uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div>
<div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
<label for="password_c">Confirm Password</label>
<input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c required />
<p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
<p ng-show="signupForm.password_c.$error.required" class="error">*</p>
</div>
The character validation for password is working, but the "noMatch" function for confirm password is not working.
What might be the problem? Thanks! :)
You need to pass your original password to directive as well/
Please see working demo below
var app = angular.module('app', []);
app.directive('validPasswordC', function() {
return {
require: 'ngModel',
scope: {
reference: '=validPasswordC'
},
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue, $scope) {
var noMatch = viewValue != scope.reference
ctrl.$setValidity('noMatch', !noMatch);
return (noMatch)?noMatch:!noMatch;
});
scope.$watch("reference", function(value) {;
ctrl.$setValidity('noMatch', value === ctrl.$viewValue);
});
}
}
});
app.controller('homeCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<p>Password:{{formData.password}}</p>
<form name="signupForm">
<div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
<label>Password</label>
<input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />
<p ng-show="signupForm.password.$error.required" class="error">*</p>
<p ng-show="signupForm.password.$error.minlength" class="error">
Passwords must be between 8 and 20 characters.</p>
<p ng-show="signupForm.password.$error.pattern" class="error">
Must contain one lower & uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div>
<div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
<label for="password_c">Confirm Password</label>
<input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c="formData.password" required />
<p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
<p ng-show="signupForm.password_c.$error.required" class="error">*</p>
</div>
</form>
</div>
</div>
The easiest is this one.But i don't know this is the good way of coding.
<input ng-model="password" name="user_password" type="password" ng-required="true" >
<input ng-model="confirmPassword" name="user_password" type="password" ng-required="true" >
<span ng-show="pasword !== confirmPassword">Password mismatch</span>
The following also will work to verify the confirm password.
<div ng-app="myapp" ng-controller="mainController as mnCtrl">
<form name="mnCtrl.useradd" ng-submit="mnCtrl.frmAdd()" novalidate role="form">
<input ng-model="mnCtrl.fields.password" name="user_password" type="password" ng-required="true" >
<input ng-model="mnCtrl.fields.cpassword" name="user_cpassword" type="password" ng-required="true" >
<div ng-show=" mnCtrl.useradd.user_cpassword.$viewValue != '' && (mnCtrl.useradd.user_password.$viewValue != mnCtrl.useradd.user_cpassword.$viewValue) ">Fields do not match!</div>
</form>
</div>

Resources