Search code examples
angularjsng-hide

Angular ng-hide doesn't work

I'm facing a problem with Angular. My code is simple but ng-hide doesn't work. I want to hide a part of the code when a button of the sign up form has been modified by user. Could you help me?

<body ng-app="myApp" ng-controller="formCtrl">
<form name="signUpForm" ng-submit="signUpFormSubmit(signUpForm.$valid)" novalidate>
    <input type="text" placeholder="Email address *" name="signUpEmail">
    <input type="text" placeholder="Pseudo *" name="signUpPseudo">
    <input type="password" placeholder="Password *" name="signUpPassword">
    <button type="submit" class="button button-block button-positive">Sign Up</button>
    <div ng-hide="signUpForm.signUpEmail.$pristine || signUpForm.signUpPseudo.$pristine || signUpForm.signUpPassword.$pristine">
        <hr>
        <div class="padding-horizontal">
             <h4 class="center">You already have an account?</h4>

            <button class="button button-block button-stable">Sign In</button>
        </div>
    </div>
</form>

Here is a JsFiddle : http://jsfiddle.net/9ce63mno/3/

UPDATE: although I don't know why a controller is needed in this case, I added one. Also I defined ng-app.

Thank you

Solution

  • I found the problem. Apparently it is because there is no ng-model defined for the form fields.