Show/hide input in html form

Question

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>

ng-modal must be ng-model. Your input must have a name ("password" for example), and the correct way to access its dirty flag is to use signupForm.password.$dirty. — JB Nizet
– JB Nizet, Commented May 19, 2015 at 22:14
@Jackson, the angularjs docs show good examples here: docs also see the answer i posted below which uses $valid and required. GL! — Shehryar Abbasi
– Shehryar Abbasi, Commented May 19, 2015 at 23:17

Poyraz Yilmaz · Accepted Answer · 2015-05-19 22:24:42Z

1

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

edited May 19, 2015 at 22:24

answered May 19, 2015 at 22:17

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jacksonkr Over a year ago

I'm not sure why it's not animating but at least my extra input shows/hides now.

Shehryar Abbasi · Accepted Answer · 2015-05-19 23:12:27Z

1

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/

answered May 19, 2015 at 23:12

Shehryar Abbasi

3782 silver badges8 bronze badges

Collectives™ on Stack Overflow

Show/hide input in html form

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related