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
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);
}
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;
})
}
}
});
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 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 ?
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>