La convalida del modulo AngularJS è sempre true

Question

loginForm.$valid è sempre restituito true, anche se i campi richiesti non sono compilati. Non sono stato in grado di trovare un problema simile ovunque.

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

Qualsiasi aiuto è apprezzato.

Answer 1

La convalida del modulo e i relativi flag vengono impostati solo se si dispone dei controller ng-model assegnati ai rispettivi controlli. Quindi assegnare loro la direttiva ng-model. Inoltre, anziché utilizzare id, è possibile utilizzare name. Verrà quindi utilizzato come alias (nome delle proprietà) per il rispettivo controller del modello ng assegnato nell'istanza formController (ad esempio: 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>