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/
Related
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>
I have HTML code:
<input type="text" ng-model="name" required>
<input type="text" ng-model="sec_name" required>
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
How I can remove required attribute if user checked input type="checkbox"?
And to come back if unchecked?
It needs for ng-disabled:
<div ng-disabled="form.$invalid">Send form</div>
You can use ng-required, instead of required, so you could set a model on the checkbox for example like
<input type="text" ng-model="name" ng-required="!none">
<input type="text" ng-model="sec_name" ng-required="!none">
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
Here is a working example for you - http://jsfiddle.net/U3pVM/16544/
Use ng-required instead:
<input type="text" ng-model="sec_name" ng-required="none">
That's exactly why ng-required exists.
Why isn't the error variable being set here? Shouldn't user.username.$error.minlength be true when no value is in the input?
<form name="user" ng-submit="submit()">
<div class="input-wrapper">
<input placeholder="Username" ng-model="user.username" ng-minlength="2" ng-maxlength="12" />
<div ng-show="user.username.$error.minlength">Min length!</div>
</div>
<div class="input-wrapper">
<input placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" />
<div ng-show="loginForm.password.$error.minlength">Min length!</div>
</div>
</form>
if you need to show the message when there is no value for the password you need to check the required property.
put a name for the form
<form name="formName" ng-submit="submit()">
put a name to password input. and the required attribute
<input name="password" placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" required />
change the ng-show as,
<div ng-show="formName.password.$error.required || formName.password.$error.minlength">Min length!</div>
formName.password.$error.required will handle the status of empty input.
here is a plunker demo
How can I retrieve a form value in the controller, when the specific field is no field of the model?
<form name="userForm" ng-submit="updateUser()">
//fields of model
<input type="text" name="firstname" ng-model="user.first_name" required/>
//not bound to model
<input type="password" name="password"/>
<input type="password" name="password_confirmation"/>
</form>
In the controller:
console.log($scope.password);
returns undefined. Is it possible to get the passwords without modifing the user resource?
You can just add ng-model="password", it'll get added to the scope but not $scope.user:
<input type="password" name="password" ng-model="password" />
<input type="password" name="password_confirmation" ng-model="password_confirmation" />