Question

我正在尝试验证表格中的2组单选按钮和一组复选框。在提交表单之前，应从每个集合中选择至少一个项目。我确实喜欢如下所示，但是当我从每组中选择一个时，按钮没有启用。

我也尝试使用＆＃34; required＆＃34;对于输入和喜欢＆＃34; required！= radioM＆＃34;对于不同的集合，但没有任何效果。看似简单，但我做错了。

<form class="form-inline" name="myForm">
   <div class="form-group"> 
   <label class="radio-inline" >
   <input name="sampleinlineradio" value="1" type="radio" ng-model="radioM" 
        ng-required="true" >Main1</label>
   <label class="radio-inline">
   <input name="sampleinlineradio" value="2" type="radio" ng-model="radioM" 
        ng-required="true" >Main2</label>
   <label class="radio-inline">
   <input name="sampleinlineradio" value="3" type="radio" ng-model="radioM" 
        ng-required="true" >Main3</label></div>

   <div class="form-group">
   <label ng-repeat="branch in branches" >
   <input  type="checkbox" name="selectedBranches[]" value="{{branch.value}}" 
                ng-model="branch.selected" ng-required="true" >{{branch.name}}
   </label></div> 

   <div class="form-group">  
   <label class="searchlabel"> 
   <input name="searchinlineradio" value="showComponentSearch" type="radio" 
        ng-model="value" ng-required="true">Search By C_Number</label> 
   <input type="text" ng-model="search" >

   <label class="searchlabel">
   <input name="searchinlineradio" value="showDateRangeSearch" 
          type="radio" ng-model="value" >Search By Time</label></div>

   <input type="button" ng-click="fetchAll()" value="submit" 
          class="btn btn-success" ng-disabled="myForm.$invalid">  
</form>

UPDATE 我将以下代码添加到控制器中。现在，当我从group1中选择一个无线电并从group2中选择一个复选框而不从上一组中选择一个无线电时，按钮会启用。此外，如果我从group1中选择一个收音机并从group2中选择一个收音机（按钮仍处于禁用状态），然后选择复选框，则启用该按钮[（即）如果我更改订单则工作正常]。

在控制器中

$scope.branches= [ { name: 'B1', selected: false, value: '1'},
                   { name: 'B2', selected: false, value: '2'},
                   { name: 'B3', selected: false, value: '3'}
                  ];
 //added this
$scope.isOneSelected = function(){
  return !$scope.branches.some(function(options){
  return options.selected;
  });
 };

Answer 1

您可以对所有字段使用required，并且您正在使用bootstrap datepicker，因为您还需要检查$ scope变量，执行类似这样的操作，

<div ng-if="value == 'showDateRangeSearch'">
  <input type="button" ng-click="fetchAllstats()" value="Generate Report" class="btn btn-success" ng-disabled="myForm.$invalid && !fromDate && !toDate">
</div>
<div ng-if="value == 'showComponentSearch'">
  <input type="button" ng-click="fetchAllstats()" value="Generate Report" class="btn btn-success" ng-disabled="myForm.$invalid">
</div>

Answer 2

编辑：使用更改

看起来很好

angular.module('test', []).controller('Test', Test);

function Test($scope) {
  $scope.branches = [{
    name: 'B1',
    selected: false,
    value: '1'
  }, {
    name: 'B2',
    selected: false,
    value: '2'
  }, {
    name: 'B3',
    selected: false,
    value: '3'
  }];
  //added this
  $scope.isOneSelected = function() {
    return !$scope.branches.some(function(options) {
      return options.selected;
    });
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  <form class="form-inline" name="myForm">
    <div class="form-group">
      <label class="radio-inline">
        <input name="sampleinlineradio" value="1" type="radio" ng-model="radioM" ng-required="true">Main1</label>
      <label class="radio-inline">
        <input name="sampleinlineradio" value="2" type="radio" ng-model="radioM" ng-required="true">Main2</label>
      <label class="radio-inline">
        <input name="sampleinlineradio" value="3" type="radio" ng-model="radioM" ng-required="true">Main3</label>
    </div>

    <div class="form-group">
      <label ng-repeat="branch in branches">
        <input type="checkbox" name="selectedBranches[]" value="{{branch.value}}" ng-model="branch.selected" ng-required="isOneSelected()">{{branch.name}}
      </label>
    </div>

    <div class="form-group">
      <label class="searchlabel">
        <input name="searchinlineradio" value="showComponentSearch" type="radio" ng-model="value" ng-required="true">Search By C_Number</label>
      <input type="text" ng-model="search">

      <label class="searchlabel">
        <input name="searchinlineradio" value="showDateRangeSearch" type="radio" ng-model="value">Search By Time</label>
    </div>

    <input type="button" ng-click="fetchAll()" value="submit" class="btn btn-success" ng-disabled="myForm.$invalid">
  </form>
</div>

Answer 3

看到这个

你的HTML

<form class="form-inline" name="myForm">
  <div class="form-group">
    <label class="radio-inline">
      <input name="sampleinlineradio" value="1" type="radio" ng-model="radioM" required="true">Main1</label>
    <label class="radio-inline">
      <input name="sampleinlineradio" value="2" type="radio" ng-model="radioM" required="true">Main2</label>
    <label class="radio-inline">
      <input name="sampleinlineradio" value="3" type="radio" ng-model="radioM" required="true">Main3</label>
  </div>
  <div class="form-group" ng-repeat="data in dataToUse">
    <label>{{userType.name}}
      <input type="checkbox" name="selectedBranches[]" value="{{data.value}}" ng-model="data._id" ng-click="checkboxTick()">
    </label>
  </div>
  <div class="form-group">
    <label class="searchlabel">
      <input name="searchinlineradio" value="showComponentSearch" type="radio" ng-model="value" required>Search By C_Number</label>
    <input type="text" ng-model="search">
    <label class="searchlabel">
      <input name="searchinlineradio" value="showDateRangeSearch" type="radio" ng-model="value" required>Search By Time</label>
  </div>
  <input type="button" ng-click="fetchAll()" value="submit" class="btn btn-success" ng-disabled="myForm.$invalid || checkTick.valu">
</form>

现在是脚本

$scope.checkboxTick = function() {
var len = 0;
angular.forEach($scope.allUserTypes, function(v, k) {
  console.log(v, k);
  if (v._id == true) {
    len++;
  }
})
if (len > 0) {
  $scope.checkTick.valu = false;
 }
}
$scope.checkTick = {
  valu: true
};

$scope.dataToUse=[
{
  name : box1,
  id : 1
},{
  name : box2,
  id : 2
}
]

AngularJS验证表单中的单选按钮和复选框组

3 个答案: