現場NG-消息值沒有驗證錯誤

Question

我試圖建立一個表單字段將使用這個簡單的例子代碼包含AngularJS驗證通過NG的消息模塊：

<form name="myForm"> 
    <input type="text" ng-model="field" name="myField" required minlength="5" /> 
    <div ng-messages="myForm.myField.$error"> 
     <div class="alert alert-danger" ng-message="required">You did not enter a field</div> 
     <div class="alert alert-danger" ng-message="minlength">The value entered is too short</div> 
    </div> 
</form> 

是否有辦法建立一個「符合所有標準」的案例，以便我可以將其與自己正確設計的div綁定並告知用戶他們的入口符合所有驗證要求？ API文檔沒有提到它，也沒有其他任何指導或論壇帖子。有一個ng-message關鍵字來表示一個可接受的條目會很好。

Answer 1

良好爲例：

HTML

<div ng-app="validationApp" ng-controller="mainController"> 
<div class="container"> 
<div class="row"> 

<div class="col-sm-6"> 
    <!-- FORM ============ --> 

    <form name="userForm" ng-submit="submitForm()" novalidate> 

     <!-- NAME --> 
     <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"> 
      <label>Name</label> 
      <input type="text" name="name" class="form-control" ng-model="user.name" required> 
      <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p> 
     </div> 

     <!-- USERNAME --> 
     <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"> 
      <label>Username</label> 
      <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> 
      <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p> 
      <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p> 
     </div> 

     <!-- EMAIL --> 
     <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"> 
      <label>Email</label> 
      <input type="email" name="email" class="form-control" ng-model="user.email"> 
      <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p> 
     </div> 

     <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> 

    </form> 
    </div> 
    <div class="col-sm-6"> 
    <!-- VALIDATION TABLES ======== -->  
    <div class="row"> 
     <div class="col-xs-3"> 
      <h3>Form</h3> 
      <table class="table table-bordered"> 
       <tbody> 
        <tr> 
         <td ng-class="{ success: userForm.$valid, danger: userForm.$invalid }">Valid</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.$pristine, danger: !userForm.$pristine }">Pristine</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.$dirty }">Dirty</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="col-xs-3"> 
      <h3>Name</h3> 
      <table class="table table-bordered"> 
       <tbody> 
        <tr> 
         <td ng-class="{ success: userForm.name.$valid, danger: userForm.name.$invalid }">Valid</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.name.$pristine, danger: !userForm.name.$pristine }">Pristine</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.name.$dirty }">Dirty</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.name.$touched }">Touched</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="col-xs-3"> 
      <h3>Username</h3> 
      <table class="table table-bordered"> 
       <tbody> 
        <tr> 
         <td ng-class="{ success: userForm.username.$valid, danger: userForm.username.$invalid }">Valid</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.username.$pristine, danger: !userForm.username.$pristine }">Pristine</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.username.$dirty }">Dirty</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.username.$touched }">Touched</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="col-xs-3"> 
      <h3>Email</h3> 
      <table class="table table-bordered"> 
       <tbody> 
        <tr> 
         <td ng-class="{ success: userForm.email.$valid, danger: userForm.email.$invalid }">Valid</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.email.$pristine, danger: !userForm.email.$pristine }">Pristine</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.email.$dirty }">Dirty</td> 
        </tr> 
        <tr> 
         <td ng-class="{ success: userForm.email.$touched }">Touched</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 

</div> 
</div> 
</div> 

JS：

// create angular app 
    var validationApp = angular.module('validationApp', []); 

    // create angular controller 
    validationApp.controller('mainController', function($scope) { 

     // function to submit the form after all validation has occurred    
     $scope.submitForm = function() { 

      // check to make sure the form is completely valid 
      if ($scope.userForm.$valid) { 
       alert('our form is amazing'); 
      } 

     }; 

    }); 

Answer 2

場沒有驗證錯誤是$valid場。因此請使用您的ng-show。

<div ng-show="myForm.myField.$valid">Everything seems fine.</div>