確保在角度中至少選擇了一個複選框

我需要驗證是否至少有一個複選框（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>

來源

2017-02-13 A. Appleby

當您提交點擊或您所需的事件工作時，會檢查'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如何處理這樣的邏輯。

來源

2017-02-13 12:15:06 Korte

你可以添加一個驗證行：

<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指令，並且條件相同。

來源

2017-02-13 12:14:15 cst1992

確保在角度中至少選擇了一個複選框

回答

相關問題