Xác thực biểu mẫu AngularJS luôn đúng

Question

loginForm.$valid luôn trả về true, ngay cả khi các trường bắt buộc không được điền. Tôi không thể tìm thấy một vấn đề tương tự ở bất cứ đâu.

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

Mọi trợ giúp đều được đánh giá cao.

Answer 1

Xác thực biểu mẫu và cờ liên quan sẽ chỉ được đặt nếu bạn có ng-model bộ điều khiển được gán cho các điều khiển tương ứng. Vì vậy, hãy chỉ định ng-model chỉ thị cho họ. Ngoài ra, thay vì sử dụng id, bạn có thể sử dụng name. Sau đó nó sẽ được sử dụng làm bí danh (tên thuộc tính) cho bộ điều khiển mô hình ng tương ứng được gán trên cá thể formController (ví dụ: 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>