Angularjs表單驗證輸入，複選框和單選按鈕

我需要選擇至少一個複選框和一個單選按鈕，其餘字段。Angularjs表單驗證輸入，複選框和單選按鈕

這裏沒有選擇複選框，它允許提交，如果我選擇一個複選框，那麼它也不允許。

請我來驗證這種形式與其餘字段與至少一個複選框，單選按鈕，需要

<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>

來源

2017-03-16 Arun Kumar M

有沒有默認的角色，這樣就可以保持一個選擇 –

@JayantPatil，我不是面臨着角色的任何問題（無線電按鈕），我在複選框驗證中遇到問題 –

我想改變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)">

來源

2017-03-16 08:18:40

它正在工作............謝謝 –

Angularjs表單驗證輸入，複選框和單選按鈕

回答

相關問題