AngularJS form validation is always true

Question

loginForm.$valid is always return true, even when required fields are not filled out. I was unable to find a similar problem anywhere.

<form name="loginForm" 
      class="form-login" 
      ng-submit="loginForm.$valid && loginCtrl.login(navCtrl)" 
      novalidate>

    <div class="form-group">
        <label for="email">Username:</label>
        <input type="email" class="form-control" id="username" placeholder="Enter username" required>
    </div>

    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" required>
    </div>

    <div class="form-group text-right">
        <a href="#">Forgot password?</a>
    </div>
    <div>Login form is {{loginForm.$valid}}</div>
    <button type="submit" class="btn btn-default">Login</button>
</form>

Any help is appreciated.

PSL · Accepted Answer · 2015-05-27 15:36:18Z

11

Form validation and related flags will be set only if you have ng-model controllers assigned to the respective controls. So assign ng-model directive to them. Also instead of using id, you could use name. It will then be used as alias (property names) for the respective ng-model controller assigned on the formController instance (ex: loginForm.username.$valid ).

<div class="form-group">
        <label for="email">Username:</label>
        <input type="email" class="form-control" 
         ng-model="ctrl.userName"
         name="username" placeholder="Enter username" required>
    </div>

    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" 
           ng-model="ctrl.password"
           name="pwd" placeholder="Enter password" required>
    </div>

edited May 27, 2015 at 15:36

answered May 27, 2015 at 15:27

PSL

124k21 gold badges257 silver badges243 bronze badges

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

1 Comment

cohenadair Over a year ago

That worked, thank you; however, now the form is never valid even with both fields filled out. E: Nevermind, I wasn't entering a valid email. Sorry!

Obsidian · Accepted Answer · 2019-07-09 05:28:20Z

1

I had this problem too. The answer was required syntax wasn't there.
So it was always valid to submit the form.

edited Jul 9, 2019 at 5:28

Obsidian

3,9308 gold badges20 silver badges33 bronze badges

answered Jul 8, 2019 at 20:56

omarhabeh

777 bronze badges

2 Comments

Tom Faltesek Over a year ago

The example in the question is using the required attribute.

omarhabeh Over a year ago

i know , but in my case i had this problem in angular 8 , and it was because of required syntax

MM Furkan · Accepted Answer · 2018-10-03 10:13:58Z

-1

Remember.

if you are on angular 5 material design and using [ngModelOptions]="{standalone: true}" in input field make it false ==> [ngModelOptions]="{standalone: false}"

answered Oct 3, 2018 at 10:13

MM Furkan

531 silver badge9 bronze badges

Collectives™ on Stack Overflow

AngularJS form validation is always true

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related