Hi I am trying to validate password using ng-show and error messages are displayed even though the password is correct and also are displayed on page refresh.
My code is : Form name is : registeruser
<!-- Set a password for the account -->
<div class="col-md-12" style="margin: 7px;">
<input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" required autocomplete="off" />
<!-- Button for viewing password -->
<input type="checkbox" id="eye" onclick="if(password.type=='text')password.type='password'; else password.type='text';" />
</div>
<!-- Error Message for password -->
<div class="error-message" ng-show="registeruser.password.$invalid">
Please enter at least 6 characters.
</div>
<div class="error-message" ng-show="registeruser.password.$pristine">
Please enter your password.
</div>
I checked the ng-show with the placeholder name, id and model name but it not working.
Also I want the password error to be displayed if the user tabs out of the password field without entering the password and not on page load when the password field is empty.
Try something like this. Here "formSubmitted" is a scope variable set while the submit button is clicked. You can set it in the controller like $scope.formSubmitted = true; inside a function and call it using ng-click of the submit button. Note: The use of ng-minlength for checking the minimum 6 characters requirement.
<div class="col-md-12" style="margin: 7px;">
<input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="password" ng-minlength="6" required autocomplete="off" />
</div>
<!-- Error Message for password -->
<div class="error-message" ng-show="(registeruser.password.$error.minlength && !registeruser.password.$pristine) || (registeruser.password.$pristine && formSubmitted)">
Please enter at least 6 characters.
</div>
<div class="error-message" ng-show="(registeruser.password.$error.required && !registeruser.password.$pristine) || (registeruser.password.$pristine && formSubmitted)">
Please enter your password.
</div>
use $dirty in addition with $invalid to display error-message. $dirty is set by angular to determine if user put anything on input.
If you want error-message displayed only if input get and lost focus without any text you should use ng-blur/ng-focus to manage entry/exit on input.
By default angular manage only when user insert text in input via $dirty but detect no changes if user enter and exit from the input without entering text.
Use of $dirty :
<input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" required autocomplete="off" ng-minlength="6" />
<!-- Error Message for password -->
<div class="error-message" ng-show="registeruser.password.$invalid && registeruser.password.$dirty">
Please enter at least 6 characters.
</div>
Related
I have a login form in which I display any relevant error messages once the user clicks submit. When the user goes back to the input field to edit it, I want to hide the error message.
<form name="loginForm" ng-submit="loginForm.$valid && login(loginFrm.userId, loginFrm.password);" novalidate>
<input type="text"
name="userId"
ng-model="loginFrm.userId"
required
ng-minlength="3"
placeholder="User ID"
autofocus>
<div ng-show="loginForm.$submitted && loginForm.userId.$invalid">Minimum 3 characters required</div>
<input type="password"
name="password"
ng-model="loginFrm.password"
required
ng-minlength="4"
placeholder="Password">
<div ng-show="loginForm.$submitted && loginForm.password.$invalid">Minimum 4 characters required</div>
<button>Login</button>
</form>
In my current code the error message hides only after the field becomes valid. How do I hide it as soon as the user starts to edit the field?
Two of the options you got here to hide the message is with ng-focus or ng-change.
Depends when you want to hide the message. When using ng-change, you have to change your ng-model-options to allow invalid values. Else the event will not trigger.
I added both options to this plnkr.
With ng-focus
<input type="text"
name="userId"
ng-model="loginFrm.userId"
required
ng-minlength="3"
placeholder="User ID"
ng-focus="main.userIdEdit = true"
ng-blur="main.userIdEdit = false"
autofocus>
<div ng-show="!main.userIdEdit && loginForm.$submitted && loginForm.userId.$invalid">Minimum 3 characters required</div>
With ng-change
<input type="password"
name="password"
ng-model="loginFrm.password"
ng-model-options="{ allowInvalid: true }"
required
ng-minlength="4"
placeholder="Password"
ng-change="main.passwordEdit = true"
ng-blur="main.passwordEdit = false">
<div ng-show="!main.passwordEdit && loginForm.$submitted && loginForm.password.$invalid">Minimum 4 characters required</div>
I try to set an input as required if another input has changed. My need is to require confirm password if password has changed.
I use this on the input of confirm password but it is never required :
ng-required="userForm.Password.$touched"
CodePen
Another question : Is there a way to remove ng-Model="user.ConfirmPassword"? because ConfirmPassword is not necessary on my model "user", isn't it?
You should use the name property instead of id.
Also, this is no valid syntax:
<span class="error" ng-show="userForm.Password.$touched userForm.Password.$error.required">Password is required</span>
It should be:
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
Then it will work just fine, as long as Password is the name of the input element, not the ID.
You are not using name property, so you can't use form properties for Password and ConfirmPassword...
Also change AND to OR..
here is updated code
<form name="userForm" ng-controller="userController">
<label for="Password">Set a password:</label>
<input type="password" name="Password" id="Password" ng-model="user.Password" required />
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
<br />
<label for="ConfirmPassword">Confirm the password:</label>
<input name="ConfirmPassword" type="password" id="ConfirmPassword" ng-model="user.ConfirmPassword" ng-required="userForm.Password.$touched" />
<span class="error" ng-show="userForm.Password.$touched || userForm.ConfirmPassword.$touched || userForm.ConfirmPassword.$error.required">Confirm password is required</span>
<br/>
<span>Password: {{user.Password}}</span>
<br/>
<span>Conform Password: {{user.ConfirmPassword}}</span>
</form>
I was trying to do something like this
using this code
<div class="row" id="passwordRow">
<div class=".col-80">
<input type="password" id="password" placeholder="Password" ng-model="user.password" ng-minlength="8" ng-required="true" ng-hide="showPassword" >
<input type="text" id="passwordRaw" placeholder="Password" ng-model="password" ng-show="showPassword">
</div>
<div class="col">
<i class="icon ion-eye" id="passwordView" on-touch="showPassword = !showPassword"></i>
</div>
</div>
But what happens is, if i type something and press it the first time it shows nothing. If i type and press it a second time, it shows the correct value.
What am I doing wrong?
in password input you assign password to user object in the controller scope while in the second field you retain password from rootScope. since there is nothing there so it shows empty input. when you assign a password to text input a password property is created in the parent scope. the thing is that those two properties can be different. ex. you can set for the first time "abc" to to password input and when you click button and got text input type abcdef. if you change back again to password input you'll see your password input is 3 letters long and not 5 and it has the original value you typed earlier ("abc")
you can remove user from user.password like this :
<div class=".col-80">
<input type="password" placeholder="Password" ng-model="password" ng-minlength="8" ng-required="true" ng-hide="showPassword">
<input type="text" placeholder="Password" ng-model="password" ng-show="showPassword">
</div>
cz ng-model should be same for both the input value
I have the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</form>
Is there an automated way in Angular to display the error messages for invalid form. For Example, I have the below. It indeed works well in that it doesn't allow the user to submit but it doesn't give the user any automatic feedback to tell them that elements are required. Isn't there an automatic way to get it to print a field is required message by the field if the form is invalid on submit?
<div class="form-center">
<form name="loginform" class="forms" ng-controller="controllers.LoginController">
<fieldset> <legend><h3>Account Login</h3></legend>
<div class="advanced-search-item">
<label>Username:</label><br /> <input type="text" ng-model="username" name="username" placeholder="username" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
</div>
<div class="advanced-search-item">
<label>Password:</label><br />
<input type="password" name="password" ng-model="password" placeholder="password" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
</div>
<div class="advanced-search-item">
Login
</div>
</fieldset>
</form>
</div>
You will have to add some spans to show errors beside input fields like below
<span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
<span class="error" ng-show="submitted && loginform.password.$error.required">Required!</span>
Hopefully you can keep this text in red color, below is the CSS
.error {
padding-left:10px;
color: #F00;
}
when form is submitted and if there are errors it will show above spans
Hope this helps