如何使用ng消息顯示覆選框集和收音機設置的錯誤消息？

Question

我一直在嘗試驗證複選框集和收音機集，並使用ng-messages指令顯示錯誤消息，但不能按預期工作。 ng消息根本不顯示錯誤消息。我正在使用html文件填充錯誤消息。直到錯誤得到解決，提交按鈕將在我的表單中被禁用。

我如何可能會顯示錯誤消息設置的複選框，當電臺設置：在收音機沒有選擇

1. 一種選擇？

2. 複選框集中至少沒有選擇一個選項？

3. 縮放複選框設置的檢查，以便我們可以檢查至少2個或更多被檢查等。

這裏是我的形式：

<form name="userForm" ng-submit="submitForm()" novalidate> 
    <div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && !userForm.subscribe.$touched }"> 
     <label class="checkbox-inline"> 
      <input type="checkbox" id="subscribe1" value="option1" name="subscribe[]" ng-model="user.subscribe" required> 1 
     </label> 
     <label class="checkbox-inline"> 
      <input type="checkbox" id="subscribe2" value="option2" name="subscribe[]" ng-model="user.subscribe" required> 2 
     </label> 
     <label class="checkbox-inline"> 
      <input type="checkbox" id="subscribe3" value="option3" name="subscribe[]" ng-model="user.subscribe" required> 3 
     </label> 

     <div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid"> 
      <div ng-messages-include="home/messages.html"></div> 
     </div> 
    </div> 

    <div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && !userForm.gender.$touched }"> 
     <div class="radio"> 
      <label> 
       <input type="radio" name="gender" value="male" ng-model="user.gender" /> 
       male 
      </label> 
     </div> 
     <div class="radio"> 
      <label> 
       <input type="radio" name="gender" value="female" ng-model="user.gender" /> 
       female 
      </label> 
     </div> 

     <div class="help-block" ng-messages="userForm.gender.$error" ng-show="userForm.gender.$invalid"> 
      <div ng-messages-include="home/messages.html"></div> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-primary btn-success " ng-disabled="userForm.$invalid">Submit</button> 
</form> 

messages.html

<span ng-message="required">This field is required</span> 
<span ng-message="minlength">This field is too short</span> 
<span ng-message="maxlength">This field is too long</span> 
<span ng-message="required">This field is required</span> 
<span ng-message="email">This needs to be a valid email</span> 

controller.js

angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngMessages']); 

angular 
    .module('myApp') 
    .controller('HomeCtrl', HomeCtrl); 

HomeCtrl.$inject = ['$scope']; 

function HomeCtrl($scope) { 
    $scope.userForm = {}; 
} 

付款複選框設置：

<div class="form-group" ng-class="{ 'has-error' : userForm.payment.$invalid && userForm.payment.$touched }"> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="payment1" value="Visa" name="payment" ng-blur="doTouched()" ng-model="user.payment[1]" ng-required="!someSelected(user.payment)"> Visa 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="payment2" value="Mastercard" name="payment" ng-blur="doTouched()" ng-model="user.payment[2]" ng-required="!someSelected(user.payment)"> Mastercard 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="payment3" value="Cash" name="payment" ng-blur="doTouched()" ng-model="user.payment[3]" ng-required="!someSelected(user.payment)"> Cash 
    </label> 

    <div class="help-block" ng-messages="userForm.payment.$error" ng-show="userForm.payment.$invalid && userForm.payment.$touched"> 
     <div ng-messages-include="home/messages.html"></div> 
    </div> 
</div> 

Answer 1

檢查該樣品：

http://plnkr.co/edit/2w0lIf?p=preview

的複選框列表中使用的ng-required指令與someSelected功能（在控制器中所定義的），其檢查是否至少選擇一個項目：

<div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && userForm.subscribe.$touched }"> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="subscribe1" value="option1" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[1]" ng-required="!someSelected(user.subscribe)"> 1 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="subscribe2" value="option2" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[2]" ng-required="!someSelected(user.subscribe)"> 2 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="subscribe3" value="option3" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[3]" ng-required="!someSelected(user.subscribe)"> 3 
    </label> 

    <div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid && userForm.subscribe.$touched"> 
     <div ng-messages-include="messages.html"></div> 
    </div> 
</div> 

選項按鈕組更容易，使用ng-required指令與條件!user.gender：

<div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && userForm.gender.$touched }"> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="gender" value="male" ng-model="user.gender" ng-required="!user.gender"/> 
      male 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="gender" value="female" ng-model="user.gender" ng-required="!user.gender"/> 
      female 
     </label> 
    </div> 

    <div class="help-block" ng-messages="userForm.gender.$error" ng-if="userForm.gender.$touched"> 
     <div ng-messages-include="messages.html"></div> 
    </div> 
</div> 

的ngBlur指令解決問題，一個複選框列表成爲「感動」只有在列表中的所有項目都模糊，調用doTouched（）函數::

$scope.doTouched = function() { 
    $scope.userForm.subscribe.$setTouched(); 
    } 

PS注意正確的名稱：userForm是<form>的HTML名稱，user是綁定到表單的模型的名稱。

Answer 2

這是我創建的一個例子，它適合我們的目的。
我們的應用程序會在每個頁面上創建多個複選框問題，而$ touch似乎無法用於所有具有相同名稱屬性的輸入複選框字段。
此外，我已經看到了複選框的自定義角度插件/指令很好（他們只是綁定到1陣列模型），但似乎並不支持'required'。

這裏我設置每次我通過設置問題上custom_touched事件NG點擊：

http://jsfiddle.net/armyofda12mnkeys/9gLndp5y/7/

<li ng-repeat="choice in currentquestion.choices"> 
        <input 
        type="checkbox" 
        ng-model="choice.selected" 
        ng-required="!somethingSelectedInTheGroup(currentquestion.required, currentquestion.choices)" 
        ng-click="currentquestion.custom_touched = true;" 
        name="{{currentquestion.question_code}}" 
        id="{{currentquestion.question_code}}_{{choice.option_value}}"          
        value="{{choice.option_value}}" 
        /> {{choice.orig_option_txt}} 

       </li> 


$scope.somethingSelectedInTheGroup = function (is_required, choices) { 
    if(is_required) { 
     for(var i = 0; i < choices.length; i++) { 
     var choice = choices [i]; 
     if(choice.selected) { 
      return true; 
     } 
     } 

     return false; 
    } else { 
     return false; 
    } 
    } 

注：我本來用於<div ng-if="questionform.$dirty && questionform[currentquestion2.question_code].$invalid"> 但這並不多選框鍛鍊每個表格/頁面的問題。