角度表單驗證以顯示錯誤消息

Question

我有一個窗體，當我沒有選中任何複選框時，我想顯示內聯錯誤消息。但我無法顯示以下條件的消息

我有一個表單有兩個無線電選項 - 不，是的。當用戶選擇是時，他可以選擇從複選框列表中選擇值。當用戶選擇是單選按鈕時，他應該至少選擇一個複選框，否則應顯示錯誤消息，提示用戶至少選擇一個複選框值。如果收音機選項爲否，則不需要複選框選擇。我將如何使用角度表單驗證來實現這一點？您的輸入

<p ng-if="noCheckboxSlected" class="form-error"><img src="images/icon-error.png" alt=""/>Sorry, please select a option.</p> 
     <form name="answersToQuestions"> 
     <div class="ice-form-radio"> 
      <input type="radio" name="mpq{{allergies.questionId}}" ng-model="allergies.answer" ng-click="setQuestion(false)" value="no"> 
      <label for="mpq{{allergies.questionId}}no"><span>No </span></label> 
     </div> 
      <div class="ice-form-radio"> 
       <input type="radio" name="mpq{{questionId}}" ng-model="allergies.answer" value="yes" ng-click="setCondition(true)"/> 
       <label for="mpq{{questionId}}yes"><span>Yes</span></label> 
      </div> 
      <table> 
       <tr ng-repeat="(key, allergyList) in filteredAllergies track by $index"> 
        <td ng-repeat="allergy in allergyList track by $index"> 
         <div class="ice-form-checkbox"> 
          <input id="condition-{{allergy.allergyCode}}" ng-model="allergy.allergyIndicator" type="checkbox" /> 
          <label for="condition-{{allergy.allergyCode}}"><span>{{allergy.allergyName}}</span></label> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
     </form> 

感謝

Answer 1

首先，你應該用納克變化，而不是NG點擊。 當您的輸入值發生變化時，ng-change會被觸發。

依然採用NG-變化，你可以寫在你的控制器的方法是檢查你的複選框中的至少一個檢查和一個變量設置爲true或false：

<tr ng-repeat="(key, allergyList) in filteredAllergies track by $index"> 
    <td ng-repeat="allergy in allergyList track by $index"> 
    <div class="ice-form-checkbox"> 
     <!-- put ng-change here --> 
     <input id="condition-{{allergy.allergyCode}}" ng-model="allergy.allergyIndicator" type="checkbox" ng-change="checkOnce()"/> 
     <label for="condition-{{allergy.allergyCode}}"><span>{{allergy.allergyName}}</span></label> 
    </div> 
    </td> 
</tr> 

，並在你的控制器：

$scope.onceIsCheck = false; 
$scope.checkChange = function() { 
    $scope.onceIsCheck = false; 
    for (var i = 0; i < $scope.filteredAllergies.length; ++i) { 
    if($scope.filteredAllergies[i].allergyIndicator) { 
     $scope.onceIsCheck = true; 
    } 
    } 
}; 

在你看來：

<p ng-if="onceIfCheck">You have to check at least one item</p>