使用 angularjs 在表单验证中至少选择一个复选框答案

【问题标题】：Atleast select one check box in form validation using angularjs使用 angularjs 在表单验证中至少选择一个复选框
【发布时间】：2017-06-20 11:38:37
【问题描述】：

这是我的html

<form name="sales">
<div class="sale-type">
                            <p>Which would you like to sell?</p>
                            <fieldset class="md-form form-group">
                                <input ng-model="art.originalForSale" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2">
                                <label for="checkbox2">My Original ART</label>
                            </fieldset>

                            <fieldset class="md-form form-group">
                                <input ng-model="art.printForSale" name="printForSale" type="checkbox" class="filled-in" id="checkbox22">
                                <label for="checkbox22">Prints of my ART</label>
                            </fieldset>
                        </div>
<button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</form>

我想显示至少需要一个复选框的验证消息，我该怎么做

从这个问题How to require at least 1 checkbox for AngularJS Form Validation?找到解决方案

但它使用脚本我想要一个不使用脚本的解决方案

目前我正在使用

<span  ng-show="part1.originalForSale.$error.required" class="error">Checkbox required</span>

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

我认为这可以解决您的问题：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<ng-form name="sales" ng-app >
  <div class="sale-type">
    <p>Which would you like to sell?</p>
    <fieldset class="md-form form-group">
      <input ng-model="art.originalForSale"  value="cb1" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2" ng-required="!art.printForSale">
      <label for="checkbox2">My Original ART</label>
    </fieldset>

    <fieldset class="md-form form-group">
      <input ng-model="art.printForSale" value="cb2" name="printForSale" type="checkbox" class="filled-in" id="checkbox22" ng-required="!art.originalForSale">
      <label for="checkbox22">Prints of my ART</label>
    </fieldset>
  </div>
  <span  ng-show="sales.$invalid" class="error">Checkbox required</span>
  <button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</ng-form>

【讨论】：

奇怪！！它不起作用，仍然显示错误消息
当我运行代码时，只有当这两个复选框都未标记时才会显示消息。

【解决方案2】：

您可以使用ngRequired 指令。有一个简单的例子。

<input name="checkbox1" type="checkbox" ng-model="isChecked1" ng-required="isChecked2">
<input name="checkbox2" type="checkbox" ng-model="isChecked2" ng-required="isChecked1">

您可以使用ngMessages 验证消息

<div ng-messages="myForm.checkbox1.$error || myForm.checkbox2.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not select a checkbox !</div>
</div>

【讨论】：

即使选中了复选框，它也不起作用总是显示错误消息
至少需要一个复选框
这不是我写的。使用相同的指令和$error 变量。
让我们continue this discussion in chat.

【解决方案3】：

你试过下面吗？

<span  ng-show="!(art.printForSale || art.originalForSale) " class="error">Checkbox required</span>

如果您想在提交表单后显示消息，请与 $dirty 一起使用。

【讨论】：

【解决方案4】：

在输入标签中写入所需的属性以显示 msg

    <span ng-show="frmRegister.name.$dirty && frmRegister.name.$error.">this is req...</span>

【讨论】：

我需要检查任一字段