Angular seems to not be raising minLength or maxLength error in the below code... the required error (as well as the email error) is working however. I know ng-minlength and ng-maxlength is working because the input box is changing its CSS. The text inside the <span> is not working for the min or max errors.
See the password input below:
<section class="row" data-ng-controller="AuthenticationController">
<h3 class="col-md-12 text-center">Sign Up</h3>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2">
<form name="userForm" data-ng-submit="userForm.$valid && signup()" class="signin form-validate" novalidate autocomplete="off">
<fieldset>
<div class="form-group">
<span ng-show="userForm.email.$dirty && userForm.email.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.email.$dirty && userForm.email.$error.email" class="text-danger">This field must be a valid email address</span>
</div>
<div class="form-group">
<label for="username" class="control-label">Username</label>
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" id="password" name="password" class="form-control" required data-ng-model="credentials.password" ng-minlength="8" ng-maxlength="24" placeholder="Password">
<span ng-show="userForm.password.$dirty && userForm.password.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.minLength" class="text-danger">Please use a password of at least 8 characters</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.maxLength" class="text-danger">The charactar limit for passwords is 24</span>
</div>
<div class="text-center form-group mt">
<button type="submit" class="btn btn-large btn-primary">Sign up</button> or
Sign in
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
any thoughts on what's gone wrong here?
It was just a syntax error: userForm.password.$error.minLength should have been userForm.password.$error.minlength (capitalization).
You should change && to && inside ng-show expression, you must have getting an error in console.
The updated ng-show version will look something like below.
ng-show="userForm.password.$dirty && userForm.password.$error.required"
The other more convenient way is to use ng-messages directive, to show and hide validation messages based on form & its field validity
Related
I want to use same form for two different Views and I have two different roles.
1. Client
2. Manager
In my Controller I have added a flag based on the user role that is logged in.
$scope.userFlag=$rootScope.globalSession.UserRole,
If I login as a Manager then the value of $rootScope.globalSession.UserRole="Manager"
& If I login as a Client then the value of $rootScope.globalSession.UserRole="Client"
Now in my form I have added a condition to switch it -> ng-if="userFlag==Admin"
<form class="form-horizontal" name="UpdateAdminProfileForm" id="UpdateAdminProfileForm">
<h2>Update Profile</h2>
<hr>
<fieldset name="client" id="client" ng-if="userFlag==Admin">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Domain Name*</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Enter your username" class="form-control input-md" ng-model="theClient.OrganizationDomain" disabled>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="update"></label>
<div class="col-md-4">
<a><button id="update" name="update" class="btn btn-primary" ng-click="updateClient()">Update</button></a>
</div>
</div>
</fieldset>
<fieldset name="manager" id="manager" ng-show="userFlag==Manager">
<div class="form-group" ng-class="{ 'has-error': submitted && UpdateAdminProfileForm.myemail.$error.required || UpdateAdminProfileForm.myemail.$error.pattern }">
<label class="col-md-4 control-label" for="myemail">Email*</label>
<div class="col-md-4">
<input id="myemail" name="myemail" type="email" placeholder="Enter your email" class="form-control input-md" ng-model="theClient.Email" ng-pattern="regex.Email" ng-maxlength="20" required autofocus >
<span ng-show="submitted && UpdateAdminProfileForm.myemail.$error.required" class="help-block">Email can not be empty</span>
<span ng-show="UpdateAdminProfileForm.myemail.$error.pattern && UpdateAdminProfileForm.myemail.$invalid " class="help-block">Please enter a valid email</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button" ng-click="updateManager()">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
But its not working when I open the form, its empty and If I remove ng-if="userFlag==Admin" & ng-if="userFlag==Manager" from tags then it display the fields for both field set.
Image With FLAG
Image After Removing FLAG
Help! Thanks in advance.
It should be
ng-if="userFlag=='Admin'"
Try This
ng-if="userFlag=='Admin'" or ng-show="userFlag=='Manager'"
I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:
<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>
<fieldset class="group">
<div class="field-group">
<label class="label">Product Name</label>
<input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
<p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
<div class="error"></div>
<span class="result_product" style="color: #880000"></span>
</div>
<div class="field-group">
<input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
<p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
<label class="label">Who are end users</label>
<div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
</div>
<div class="field-group">
<label for="licenseKey">What Problem Are They Facing Today</label>
<textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
<p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
<div class="description">Spend So much in .....</div>
</div>
<div class="field-group">
<label class="label">What kind of product is this</label>
<input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
<p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
<div class="description">[Software, MobileApp, JIRA-Plugin]</div>
</div>
<div class="field-group">
<label for="d-lname">How do you plan to solve the problem</label>
<input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
<p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
<div class="error"></div>
<div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
</div>
<div class="field-group">
<label for="d-lname">Who are your competitors</label>
<input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
<p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
<div class="error"></div>
<div class="description">Traditional Commuting Solution</div>
</div>
<div class="field-group">
<label for="d-lname">How do you differntiate from your competitors</label>
<input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
<p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
<div class="error"></div>
<div class="description">[Automated, Secure]</div>
</div>
</fieldset>
<div class="buttons-container">
<div class="buttons">
<button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
<button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
</div>
</div>
</form>
How can I make sure that submit button is disabled untill all the fields are filled.
I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.
You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):
<form name="newDiscoveryForm">
<input type="text" name="someName"
ng-model="someModel"
ng-required="true" /> <!-- use ng-required -->
<!-- other inputs -->
<!-- $invalid will evaluate to true if the `ng-required` are not valid -->
<button type="submit"
ng-disabled="newDiscoveryForm.$invalid">
Submit!
</button>
</form>
See this JSFIDDLE
I tried and searched a lot, but no solution. The form validation in my angular app still not working.
I tried for example:
<form data-ng-controller="ValidationController" name="validationForm" novalidate="novalidate">
<div class="form-group">
<label for="username">Mail</label>
<input name="username"
type="email"
data-ng-model="formData.username"
required="required">
<span ng-show="form.username.$invalid">Invalid mail address</span>
</div>
<button type="submit" class="btn btn-primary" data-ng-disabled="formData.$invalid">Submit</button>
<pre>
<tt>formData = {{formData}}</tt><br/>
<tt>formData.$valid = {{formData.$valid}}</tt><br/>
<tt>formData.username.$valid = {{formData.username.$valid}}</tt><br/>
<tt>formData.username.$error = {{formData.username.$error}}</tt><br/>
<hr>
</pre>
</form>
Another one I tried:
<div class="row">
<div class="large-12 columns">
<label>Your email</label> <input type="email" placeholder="Email"
name="email" ng-model="signup.email" ng-minlength=3 ng-maxlength=20
required />
<div class="error-container"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.required">
Your email is required. </small> <small class="error"
ng-show="signup_form.email.$error.minlength"> Your email is required
to be at least 3 characters </small> <small class="error"
ng-show="signup_form.email.$error.email"> That is not a valid email.
Please input a valid email. </small> <small class="error"
ng-show="signup_form.email.$error.maxlength"> Your email cannot be
longer than 20 characters </small>
</div>
</div>
</div>
But the validation does not work. If I have to enable the validation? But for this I also didn't find anything. It seems, that validation is still enabled in Angular. But why it does not work in my app? All other things works fine.
Regards
Bytecounter
Try this:
<form data-ng-controller="ValidationController" name="validationForm" novalidate="novalidate">
<div class="form-group">
<label for="username">Mail</label>
<input name="username"
type="email"
data-ng-model="username"
required>
<span ng-show="validationForm.username.$invalid && validationForm.username.$dirty">Invalid mail address</span>
</div>
<button type="submit" class="btn btn-primary" data-ng-disabled="formData.$invalid">Submit</button>
<pre>
<tt>formData = {{validationForm}}</tt><br/>
<tt>formData.$valid = {{validationForm.$valid}}</tt><br/>
<tt>formData.username.$valid = {{validationForm.username.$valid}}</tt><br/>
<tt>formData.username.$error = {{validationForm.username.$error}}</tt><br/>
<hr>
</pre>
</form>
Actually your form is available by its name.
Check this plnkr.
You have some errors there.
First:
ng-show="form.username.$invalid"
You are referencing a variable form that does not exist in your scope. You should reference validationForm:
ng-show="validationForm.username.$invalid"
Second:
data-ng-disabled="formData.$invalid"
You are referencing the model of the input, instead of it's form object, that is, again, validationForm:
data-ng-disabled="validationForm.$invalid"
That should do.
I recently have a problem with ng message in angular. I tried to use it as validator however noticed that something don't work the way I want. I want the ctrl.login() function run when the user provide both password and username. Unfortunately right now it is enough to provide just one of this to and the function will trigger. How can I fix this?
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT: For clarification. Thx for pointing out the button disable feature but it is not the point of my question. The issue is that the ctrl.login function will be triggered (in other words the form will be submited) despite only 1 out of 2 required input have been filled. I expect that the ngMessage will make it impossible to submit the form if username OR password will be empty. The disable feature on the submit button is just a quick hotfix that i want to remove in the future.
<form name="authorizationForm" novalidate="" ng-submit="ctrl.login()">
<div class="list list-inset">
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid && authorizationForm.$submitted }">
<input type="text" name="username" placeholder="Username" ng-model="ctrl.data.username" required>
</div>
<div ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error" ng-messages-include="error-list.html"></div>
<div class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted }" >
<input type="password" name="password" placeholder="Password" ng-model="ctrl.data.password" required>
</div>
<div ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error" ng-messages-include="error-list.html">
</div>
</div>
<div ng-show="loginFailed" class="error-wrongCredentials"><i class="icon ion-close-circled"></i>USERNAME OR PASSWORD IS INCORRECT</div>
<button class="button button-full button-calm button-login" type="submit">Sign In</button>
</form>
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
This field is required
</div>
</script>
EDIT2: Just if case anyone is wondering. I solved the problem. Thx for help and contribution :)
You just need to replace && to || in :
data-ng-disabled="authorizationForm.password.$invalid && authorizationForm.username.$invalid"
You should change the data-ng-disabled condition to 'authorizationForm.password.$invalid || authorizationForm.username.$invalid'. Right now as long as one of the two is valid (but not necessarily both), the user can click submit.
i am using angular js directives but it's not working can any on know what i am doing wrong i follow angular js documentation but not working is there any library required is something wrong in my form .
loginView.html
<form class="form-horizontal" name="user_form" novalidate ng-submit='login()'>
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="login-Name" class="col-lg-3 form-label">User Name:</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="login-Name" ng-model="user.username" name="login-Name" placeholder="User Name" required/>
<div class="error" ng-show="user_form.login-Name.$dirty && user_form.login-Name.$invalid">
<small class="error" ng-show="user_form.login-Name.$error.required">
User name is required.
</small>
</div>
</div>
</div>
<div class="form-group">
<label for="login-Password" class="col-lg-3 form-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="login-Password" ng-model="user.password" name="login-Password" placeholder="Password" ng-minlength=6 ng-maxlength=20 required/>
<div class="error" ng-show="user_form.login-Password.$dirty && user_form.login-Password.$invalid">
<small class="error" ng-show="user_form.login-Password.$error.required">
Your Password is required.
</small>
<small class="error" ng-show="user_form.login-Password.$error.minlength">
Your Password is required to be at least 6 characters
</small>
<small class="error" ng-show="user_form.login-Password.$error.maxlength">
Your Password cannot be longer than 20 characters
</small>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Login
</button>
</div>
</form>
There are 2 mistakes in your code.
First one, you used - in your fields id (login-Name and login-Password). Replace them by _ (login_Name and login_Password). Angularjs see them as the substract operator and doesn't return an object to evaluate in the ng-show directives.
For the username (the email address), your error will never be displayed since the $error.required is set to false as soon as the field is not empty and $dirty is set to false if the field is empty. Your 2 conditions cannot be true at the same time.
For the password, you have the same problem for the required field, but your 2 other validations will work if you change your id.
Working example : Plunker