Angular Form验证以显示错误消息

Angular Form validation to show error message

本文关键字：错误 消息 显示 Form 验证 Angular      更新时间：2023-09-26

我有一个表单，当没有选中任何复选框时，我想在其中显示内联错误消息。但我无法显示以下条件的消息

我有一张有两个收音机选项的表格——不，是。当用户选择"是"时，他可以从复选框列表中选择值。当用户选择"是"单选按钮时，他应该至少选择一个复选框，否则应该显示一条错误消息，提示用户至少选择一种复选框值。如果单选选项为"否"，则不需要选中复选框。如何使用角度形式验证来实现这一点？

 <p ng-if="noCheckboxSlected" class="form-error"><img src="images/icon-error.png" alt=""/>Sorry, please select a option.</p>
        <form name="answerswersToQuestions">
        <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>

感谢

首先，您应该在输入上使用ng-change，而不是ng-click。ng-change是在您的输入值发生变化时触发的。

仍然使用ng更改，您可以在控制器中编写一个方法，检查您的复选框中是否至少有一个是check，并将变量设置为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>
相关文章：