CODEWITHSUNDEEP
javascriptangularjs
tjhack
tjhack

Reputation: 1032

Prevent form validation running for angularjs page

I have a simple form on my web app asking for username and password. I have used the standard angularjs validation.

But when i load the page the validation messages appear straight away. Not sure why this is. I have my final form markup below

 <div ng-controller="LoginCtrl">
    <form name ="loginForm" novalidate>
        <div class="input-group" style="margin-left:100px;">
            <input id="username" type="text" name="username" ng-model="user.name" class="form-control" placeholder="Username" required>
            <span class="alert-danger" ng-show="loginForm.username.$error.required">Username is required.</span>
            <input id="password "type="password" name="password" ng-model="user.password" class="form-control" placeholder="Password" required>
            <span class="alert-danger" ng-show="loginForm.password.$error.required">Password is required.</span>
        </div>
        <input class="btn btn-lg btn-success" type="submit" id="submit" value="Login" ng-click="loginUser()" />
        <pre>Username={{list}}</pre>
    </form>
</div>

Any ideas?

Upvotes: 1

Views: 1884

Answers (1)

francisco.preller
francisco.preller

Reputation: 6629

You need to let angular know not to display the message unless the $pristine value is gone (or the $dirty present) These special variables are injected into the AngularJS form to let it know that certain events have occurred.

For example, use the below code as example and adjust:

<span class="alert-danger" ng-show="loginForm.username.$error.required && loginForm.username.$dirty">Username is required.</span>
<span class="alert-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Password is required.</span>

Upvotes: 3

Related Questions