CODEWITHSUNDEEP
angularjs
Jacksonkr
Jacksonkr

Reputation: 32247

Show/hide input in html 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>

Upvotes: 0

Views: 89

Answers (2)

Shehryar Abbasi
Shehryar Abbasi

Reputation: 378

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/

Upvotes: 1

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

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...

Upvotes: 1

Related Questions