AngularJS表单验证始终如一

Question

loginForm.$valid即使没有填写必填字段,也始终返回true.我无法在任何地方找到类似的问题.

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

任何帮助表示赞赏.

Answer 1

仅当您将ng-model控制器分配给相应的控件时,才会设置表单验证和相关标志.所以给ng-model他们指定指令.也id可以使用,而不是使用name.然后,它将用作formController实例上指定的相应ng-model控制器的别名(属性名称)(例如:) 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>