确保在角度中至少选择了一个复选框

问题描述：

我需要验证是否至少有一个复选框（3）已被选中。我不能使用单选按钮，因为可以选择两个选项并排除第三个选项。我不确定是否最好将这些复选框放入模型数组中，而不是将它们绑定到单独的模型并创建更长的表达式。该文档是不是在描述什么“最佳实践”是这样的事情特别有帮助......确保在角度中至少选择了一个复选框

代码：

<div class="form-inline form-group"> 
<div class="row"> 
    <div class="col-xs-12"> 
     <h4 class="card-title left test-list-header">Balcony</h4> 
    </div> 
</div> 

<fieldset class="form-group"> 
    <input type="checkbox" id="balconyBalcony" ng-model="balcony"> 
    <label for="balconyBalcony">Balcony</label> 
</fieldset> 

<fieldset class="form-group"> 
    <input type="checkbox" id="patioBalcony" ng-model="patio"> 
    <label for="patioBalcony">Patio</label> 
</fieldset> 

<fieldset class="form-group"> 
    <input type="checkbox" id="noBalcony" ng-model="noBalcony" ng-disabled="balcony || patio"> 
    <label for="noBalcony">No</label> 
</fieldset> 

<fieldset class="form-group" ng-show="noBalcony && !patio && !balcony"> 
    <div class="md-form"> 
     <input 
      type="text" 
      id="{{ Plot::FIELD_BALCONY_NOTES }}" 
      class="form-control" 
      name="{{ Plot::FIELD_BALCONY_NOTES }}" 
      inline-edit 
      inline-edit-callback="UpdateHandler()" 
      ng-model="Model.BalconyNotes.Value" 
      ng-class="{ invalid: createPlot.balconyNotes.$invalid && submitted, valid: createPlot.floor.$valid }" 
      ng-init="Model.BalconyNotes.Value = '{{ old(Plot::FIELD_BALCONY_NOTES) or $Model->BalconyNotes }}'" ng-required="noBalcony"> 
     <label for="{{ Plot::FIELD_BALCONY_NOTES }}" data-error="@{{ Model.BalconyNotes.ValidationMessage }}" class="w-100">Comments</label> 
     <span class="help-block" ng-show="createPlot.balconyNotes.$invalid && submitted">As there is no balcony or patio, you must enter a comment</span> 

    </div> 
</fieldset>

当您提交点击或您所需的事件工作时，会检查'if（！（$ scope.balcony || $ scope.patio || $ scope.noBalcon））{//您必须选择至少一个错误}或者在html中显示相同条件的消息 – Developer

@Developer这可以在模板本身完成。 – cst1992

您没有表单属性，并且您的复选框都没有名称。您需要再次阅读表格的文档。 – cst1992

答

您可以使用ng-required内置的directive来验证您的表单。

像这样：

<form novalidate name="myForm" ng-submit="mySubmitFunc()"> 
     <label>Checkbox 1 
     <input ng-required="!(cb2 || cb3)" ng-model="cb1" type="checkbox"> 
     </label> 
     <label>Checkbox 2 
     <input ng-required="!(cb1 || cb3)" ng-model="cb2" type="checkbox"> 
     </label> 
     <label>Checkbox 3 
     <input ng-required="!(cb1 || cb2)" ng-model="cb3" type="checkbox"> 
     </label> 
     <input type="submit" ng-disabled="myForm.$invalid" value="submit"> 
    </form>

这里是一个展示fiddle如何处理这样的逻辑。

答

你可以添加一个验证行：

<div ng-show="myForm.$submitted"> 
    <p style="color: red" ng-show="!myForm.balcony && !myForm.patio && !myForm.noBalcony">You must select at least one of the options above.</p> 
</div>

该div显示用户尝试提交的时间，而p显示未选择任何时间。

您的按钮还需要一个ng-disabled指令，并且条件相同。

确保在角度中至少选择了一个复选框

相关推荐