AngularJS form validation is always true

Question

loginForm.$valid always returns true, even if the required fields are not populated. I could not 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.

Answer 1

Form validation and related flags will only be set if you have ng-model controllers assigned to the appropriate controls. Therefore, assign them the ng-model directive. Instead of using id you can use name . It will then be used as an alias (property names) for the corresponding ng model controller assigned to 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> 

Answer 2

Remember.

if you are working on the angular design of the material and use [ngModelOptions] = "{standalone: ​​true}" in the input field, make it false ==> [ngModelOptions] = "{standalone: ​​false}"

Answer 3

I also had this problem. The answer was the required syntax was not there.
So it was always right to submit the form.