Angularjs表单验证输入，复选框和单选按钮

Question

我需要选择至少一个复选框和一个单选按钮，其余字段。

这里没有选择复选框，它允许提交，如果我选择一个复选框，那么它也不允许。

请我来验证这种形式与其余字段与至少一个复选框，单选按钮，需要

JSFiddle

<form name="addUserForm" novalidate> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="form-group"> 
          <label for="email">Email:</label> 
          <input class="form-control" type="email" id="email" name="email" ng-model="addUserFormData.email" ng-pattern="^\[email protected](([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" required placeholder="[email protected]"> 
          <span class="error_text" ng-show="addUserForm.email.$error.required && addUserForm.email.$touched">Required</span> 
          <span class="error_text" ng-show="!addUserForm.email.$error.required && addUserForm.email.$error.email && addUserForm.email.$dirty">Invalid Email</span> 
         </div> 
         <div class="form-group"> 
          <label for="username">Customer Name:</label> 
          <input class="form-control" type="text" id="username" name="username" ng-model="addUserFormData.username" ng-pattern="/^[\w -]*$/" ng-minlength="2" ng-maxlength="20" maxlength="20" required placeholder="Customer Name"> 
          <span class="error_text" ng-show="addUserForm.username.$error.required && addUserForm.username.$touched">required</span> 
          <span class="error_text" ng-show="!addUserForm.username.$error.minLength && !addUserForm.username.$error.maxLength && addUserForm.username.$error.pattern && addUserForm.username.$dirty">Name must contain letters and space only.</span>        
          <span class="error_text" ng-show="!addUserForm.username.$error.required && (addUserForm.username.$error.minlength || addUserForm.username.$error.maxlength) && addUserForm.username.$dirty">Name must be between 2 and 20 characters.</span> 
         </div>        
         <div class="form-group"> 
          <label>Role:</label><br /> 
          <label class="radio-inline"><input type="radio" name="role" ng-model="addUserFormData.roleAdmin" ng-required="addUserFormData.roleAdmin || addUserFormData.roleUser">Admin</label> 
          <label class="radio-inline"><input type="radio" name="role" ng-model="addUserFormData.roleUser" ng-required="addUserFormData.roleAdmin || addUserFormData.roleUser">User</label> 
         </div> 
         <div class="form-group"> 
          <label>Accessable To:</label> 
          <div class="clearfix"><!-- donot delete this -- clear both property --></div> 
          <div class="access_checkbox"> 
           <label class="checkbox-inline"> 
            <input type="checkbox" ng-model="addUserFormData.cStoreAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics">C Store Analytics 
           </label> 
           <input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.cStoreAnalytics" placeholder="Username"> 
           <input class="form-control" type="password" ng-disabled="!addUserFormData.cStoreAnalytics" placeholder="Password"> 
          </div> 
          <div class="access_checkbox"> 
           <label class="checkbox-inline"> 
            <input type="checkbox" ng-model="addUserFormData.cameraAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics" >Camera Analytics 
           </label> 
           <input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.cameraAnalytics" placeholder="Token Id"> 

          </div> 
          <div class="access_checkbox"> 
           <label class="checkbox-inline"> 
            <input type="checkbox" ng-model="addUserFormData.wifiAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics" >Wifi Analytics 
           </label> 
           <input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.wifiAnalytics" placeholder="Username"> 
           <input class="form-control" type="password" ng-disabled="!addUserFormData.wifiAnalytics" placeholder="Password"> 
          </div> 
          <div class="clearfix"><!-- donot delete this -- clear both property --></div> 
          <p class="note_text">Make sure you have entered correct username and password</p> 
         </div> 
         <div class="form-group"> 
          <label>Password:</label> 
          <input class="form-control" type="password" placeholder="Password"> 
         </div> 
         <div class="form-group"> 
          <label>Confirm password:</label> 
          <input class="form-control" type="password" placeholder="Confirm password"> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="submit" ng-disabled="addUserForm.$invalid" ng-click="addUser()" class="btn redcolor_btn"> <!--data-dismiss="modal"-->Add</button> 
      </div> 
     </form> 

Answer 1

我想改变ng-required稍微将解决你的问题。

所以，而不是;

<input type="checkbox" 
    ng-model="addUserFormData.cStoreAnalytics" 
    ng-required="addUserFormData.cStoreAnalytics 
        || addUserFormData.cameraAnalytics 
        || addUserFormData.wifiAnalytics"> 

使用这个（申请相同的逻辑，所有的复选框）：

<input type="checkbox" 
    ng-model="addUserFormData.cStoreAnalytics" 
    ng-required="!(addUserFormData.cStoreAnalytics 
        || addUserFormData.cameraAnalytics 
        || addUserFormData.wifiAnalytics)">