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
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>
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>
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>
I'm trying to get the second password input only to show after the user starts typing into the first input. Also, is there are way to either "require" them both or none at all?
<form name="signUpForm">
...
<input ng-modal="password" type="password" placeholder="password">
<input ng-show="password.$dirty" class="animate-show animate-hide" type="password" placeholder="password (again)">
</form>
password has no property like $dirty but form controller has that one. So first of set name of input then you can access form controller with it
<form name="signUpForm">
...
<input name="passwordNameAttr" ng-modal="password" type="password" placeholder="password">
<input ng-show="signUpForm.passwordNameAttr.$dirty" class="animate-show animate-hide" type="password" placeholder="password (again)">
</form>
for dynamic require you can use ng-required. Just put an expresion on it and depends on condition your fields will be required or not...
another example using ng-show $valid required for input fields ..
html:
<form name="signUpForm">
<input name="firstPassword" ng-model="first.password" type="password" placeholder="password" required>
<input name="secondPassword" ng-show="signUpForm.firstPassword.$valid" ng-model="second.password" type="password" placeholder="password (again)" required>
</form>
working fiddle here: https://jsfiddle.net/vj5evgyw/2/