2014-05-12 30 views
0

我錯過了簡單的東西我確定它,但我的表單驗證消息從未出現在以下代碼中。Angular form驗證郵件沒有出現

<form name="loginform" ng-controller="controllers.LoginController" ng-submit="loginUser(loginform.$valid)" novalidate> 
     <fieldset> 
      <br/> 
      <legend><h3>Account Login</h3></legend> 

      <div class="{ 'has-error' : loginform.username.$invalid && !loginform.username.$pristine }"> 
       <label>Username:</label> 
       <input type="text" ng-model="username" name="username" placeholder="username" class="form-control" required><span ng-show="loginform.username.$invalid && !loginform.username.$pristine" class="help-block">Required!</span> 

      </div> 
     <br/>   
      <div class="{ 'has-error' : loginform.password.$invalid && !loginform.password.$pristine }"> 
      <label>Password:</label> 
       <input type="password" name="password" ng-model="password" placeholder="password" class="form-control" required><span ng-show="loginform.password.$invalid && !loginform.password.$pristine" class="help-block">Required!</span> 
      </div> 


      <div class="form-group"> 
       <button type="submit" class="btn btn-primary" >Submit</button> 

       <a href="#" class="advanced-search-button submit-button" ng-disabled='!loginform.$valid' ng-click="loginUser(loginform.$valid)">Login</a> 
      </div> 


     </fieldset> 
    </form> 


controllers.LoginController = function ($scope, $location, AuthFactory, Page) { 
'use strict'; 


$scope.username = null; 
$scope.password = null; 


$scope.loginUser = function (isValid) { 
+0

任何機會的的jsfiddle版本,看看它(不)工作? –

回答

0

的$原始支票是問題......這裏是更正...

<form name="loginform" ng-submit="loginUser(loginform.$valid)" novalidate> 
     <fieldset> 
      <br/> 
      <legend><h3>Account Login</h3></legend> 

      <div class="form-group" ng-class="{ 'has-error' : loginform.password.$invalid && submitted }"> 
       <label>Username:</label> 
       <input type="text" ng-model="username" name="username" placeholder="username" class="form-control" ng-required="true" required><span ng-show="loginform.username.$invalid && submitted" class="help-block">Required!</span> 

      </div> 
     <br/>   
      <div class="form-group" ng-class="{ 'has-error' : loginform.password.$invalid && submitted }"> 
      <label>Password:</label> 
       <input type="password" name="password" ng-model="password" placeholder="password" class="form-control" required><span ng-show="loginform.password.$invalid && submitted" class="help-block">Required!</span> 
      </div> 


      <div class="form-group"> 
       <button type="submit" class="btn btn-primary" >Submit</button> 

       <a href="#" class="advanced-search-button submit-button" ng-disabled='!loginform.$valid' ng-click="loginUser(loginform.$valid)">Login</a> 
      </div> 


     </fieldset> 
    </form> 
0

如果你的應用是形成重,可以考慮使用這種第三方ngValidate模塊。

<input name="demo-field-1" ng-model="user.name" ng-validate="custom-strategy"> 

該指令將添加一個跨度以容納您的錯誤消息。您可以定義自定義驗證策略和單個錯誤消息。

demo plnkr