Yêu cầu giá trị đầu vào nếu hộp kiểm được chọn

Question

Tôi có một loạt các hàng có một hộp kiểm cho mỗi. Với mỗi hàng là một số đầu vào. Tôi đã có xác nhận yêu cầu phải chọn ít nhất một hộp kiểm trong tất cả các hàng. Tuy nhiên, tôi cho đến nay không thể yêu cầu đầu vào có giá trị CHỈ cho hộp kiểm được chọn.

HTML:

<div style="width: 100%;"> 
<checkboxgroup-Wheelbase min-required="1">   
    <table style="width: 100%">         
     <tr> 
      <td> 
       <table style="width: 97%;"> 
        <tr> 
         <th style="width: 220px;" class="wheelbaseHeaderCell">Wheelbase<br /><span style="font-weight: 400;">(choose min of 1)</span></th> 
         <th class="wheelbaseHeaderCell">Payload<br />[ pounds ]</th> 
         <th class="wheelbaseHeaderCell">Length<br />[ inches ]</th> 
         <th class="wheelbaseHeaderCell">Height<br />[ inches ]</th> 
         <th class="wheelbaseHeaderCell">Weight<br />[ pounds ]</th> 
         <th class="wheelbaseHeaderCell">Turn Radius<br />[ feet ]</th> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td style="height: 5px;"></td> 
     </tr> 
     <tr> 
      <td> 
       <div style="height: 170px; overflow: auto;"> 
        <table style="width: 100%;"> 
         <tr class="rowGroup" ng-repeat="wheelbase in wheelbases" data-rowParent="wheelbase[wheelbase.Id]"> 
          <td class="wheelbaseCell" style="padding-left: 10px;" id="{{wheelbase.Id}}"> 
           <!--Wheelbase-->          
           <label class="checkbox" for="{{wheelbase.Id}}" style="text-align: left; width: 200px;"> 
            {{wheelbase.WheelbaseGrade}} - {{wheelbase.Inches}} inches 
            <input ng-model="wheelbase.checked" id="wheelbase{{wheelbase.Id}}" type="checkbox" /></label> 
          </td> 
          <td > 
           <!--Payload Capacity--> 
           <span style="display: inline-block;" ng-controller="PayloadCapacitiesCtrl"> 
            <input ng-model="payloadCapacity.Pounds" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked" /> 
           </span>                 
          </td>         
          <td > 
           <!--Length--> 
           <span style="display: inline-block;" ng-controller="VehicleLengthCtrl"> 
            <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> 
           </span>         
          </td> 
          <td > 
           <!--Height--> 
           <span style="display: inline-block;" ng-controller="VehicleHeightCtrl"> 
            <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> 
           </span>         
          </td> 
          <td > 
           <!--Weight--> 
           <span style="display: inline-block;" ng-controller="VehicleWeightCtrl"> 
            <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> 
           </span>         
          </td> 
          <td > 
           <!--Turning Radii --> 
           <span style="display: inline-block;" ng-controller="TurningRadiiCtrl"> 
            <input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/> 
           </span>         
          </td> 
         </tr> 
        </table> 
       </div> 
      </td> 
     </tr> 
    </table> 
</checkboxgroup-Wheelbase> 
<span class="hint" style="margin: 0 0 0 -35px; text-align: center; width: 100%;">   
    <button style="padding-top: 5px; ;" class="addNew" ng-click="openDialog()"><i class="icon-plus"></i> [ add new wheelbase ]</button> 
</span> 

Chỉ thị yêu cầu ít nhất một hộp kiểm được kiểm tra:

.directive('checkboxgroupWheelbase', function() { 
    return { 
     restrict: 'E', 
     controller: function($scope, $attrs) { 
      var self = this; 
      var ngModels = []; 
      var minRequired; 
      self.validate = function() { 
       var checkedCount = 0; 
       angular.forEach(ngModels, function(ngModel) { 
        if (ngModel.$modelValue) { 
         checkedCount++; 
        } 
       }); 
       console.log('minRequired', minRequired); 
       console.log('checkedCount', checkedCount); 
       var minRequiredValidity = checkedCount >= minRequired; 
       angular.forEach(ngModels, function(ngModel) { 
        ngModel.$setValidity('checkboxgroupWheelbase-minRequired', minRequiredValidity, self); 
       }); 
      }; 

      self.register = function(ngModel) { 
       ngModels.push(ngModel); 
      }; 

      self.deregister = function(ngModel) { 
       var index = this.ngModels.indexOf(ngModel); 
       if (index != -1) { 
        this.ngModels.splice(index, 1); 
       } 
      }; 

      $scope.$watch($attrs.minRequired, function(value) { 
       minRequired = parseInt(value, 10); 
       self.validate(); 
      }); 
     } 
    }; 
}) 

Có cách nào đơn giản, thanh lịch để yêu cầu các trường nhập của các hộp kiểm đó được yêu cầu không? Nó xuất hiện thẳng về phía trước trong JQuery thông qua "quy tắc" nhưng tôi đã không tìm thấy một cách để làm điều này thông qua AngularJs. Có người đề nghị tôi sử dụng các biểu mẫu phụ nhưng tôi không thể hình dung được sự cố ý của nó.

Trong trường hợp tôi đã không đủ rõ ràng:

Đối với bất kỳ hàng mà hộp kiểm tương ứng sẽ được kiểm tra, tất cả các đầu vào của hàng đó được yêu cầu phải có một giá trị. Vì vậy, nếu các hộp kiểm cho biết các hàng 1,3 và 5 được chọn, thì đầu vào của các hàng 1,3 và 5 yêu cầu giá trị. Nếu hộp kiểm của một hàng được chọn, đầu vào của cùng một hàng đó sẽ yêu cầu một giá trị. Nếu hộp kiểm của hàng đó không được chọn, những đầu vào đó không được yêu cầu. Và trong thanh toán bù trừ mà lên, nó làm cho tôi nghĩ rằng một điều khôn ngoan sẽ được cho tất cả các yếu tố đầu vào được vô hiệu hóa cho đến khi hộp kiểm chiều dài cơ sở tương ứng của họ được kiểm tra.

Cập nhật:

Tôi muốn gửi lời cảm ơn user2104976 đã làm cho tôi suy nghĩ về trải nghiệm người dùng tốt hơn trong chừng mực làm cho giá trị đầu vào chắc chắn không được thêm vào khi hộp kiểm chiều dài cơ sở tương ứng không được chọn, vì vậy tôi thực hiện

này

**"ng-disabled="!wheelbase.checked"** 

trong mỗi đầu vào tương ứng. Cảm ơn dude !! Bây giờ làm thế nào về việc giải quyết vấn đề ban đầu của tôi, LOL !!

Answer 1

Bạn có thể sử dụng ng-cần thiết để thực hiện điều này:

ng-cần = "wheelbase.checked"

Dưới đây là các cập nhật phần thích hợp HTML của:

<table style="width: 100%;"> 
    <tr class="rowGroup" ng-repeat="wheelbase in wheelbases" data-rowParent="wheelbase[wheelbase.Id]" style="padding-top: 10px;"> 
     <td class="wheelbaseCell" style="padding-left: 10px;" id="{{wheelbase.Id}}"> 
      <!--Wheelbase-->          
      <label class="checkbox" for="{{wheelbase.Id}}" style="text-align: left; width: 200px;"> 
       {{wheelbase.WheelbaseGrade}} - {{wheelbase.Inches}} inches 
       <input ng-model="wheelbase.checked" id="wheelbase{{wheelbase.Id}}" type="checkbox" /></label> 
     </td> 
     <td > 
      <!--Payload Capacity--> 
      <span style="display: inline-block;" ng-controller="PayloadCapacitiesCtrl"> 
       <input ng-model="payloadCapacity.Pounds" data-rowChild="{{wheelbase[wheelbase.Id]}}" id="payload{{wheelbase.Id}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" /> 
      </span>                 
     </td>         
     <td > 
      <!--Length--> 
      <span style="display: inline-block;" ng-controller="VehicleLengthCtrl"> 
       <input ng-model="vehicleLength.Inches" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" /> 
      </span>         
     </td> 
     <td > 
      <!--Height--> 
      <span style="display: inline-block;" ng-controller="VehicleHeightCtrl"> 
       <input ng-model="vehicleHeight.Inches" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" /> 
      </span>         
     </td> 
     <td > 
      <!--Weight--> 
      <span style="display: inline-block;" ng-controller="VehicleWeightCtrl"> 
       <input ng-model="vehicleWeight.Pounds" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" /> 
      </span>         
     </td> 
     <td > 
      <!--Turning Radii --> 
      <span style="display: inline-block;" ng-controller="TurningRadiiCtrl"> 
       <input ng-model="turningRadius.Feet" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-disabled="!wheelbase.checked" ng-required="wheelbase.checked" ng-class="{'formRequire' : wheelbase.checked }" /> 
      </span>         
     </td> 
    </tr> 
</table> 

Với ng -disabled = "! wheelbase.checked"

Với ng-required = "wheelbase.checked" & ng-class = "{'formRequire': chiều dài cơ sở.kiểm tra}"

Đây là lớp có điều kiện mà đá vào đầu vào nếu hộp kiểm tương ứng chiều dài cơ sở được kiểm tra:

.NG-invalid .formRequire { phác thảo: đỏ rắn 3px; }