AngularJS 组复选框验证

IT技术 javascript jquery angularjs
2021-01-28 08:50:46

我有一个复选框列表，其中至少有一个是强制性的。我试图通过 AngularJS 验证来实现这一点，但很难。下面是我的代码：

// Code goes here for js 

var app = angular.module('App', []);

function Ctrl($scope) {
  $scope.formData = {};
  $scope.formData.selectedGender = '';
  $scope.gender = [{
    'name': 'Male',
    'id': 1
  }, {
    'name': 'Female',
    'id': 2
  }];
  $scope.formData.selectedFruits = {};
  $scope.fruits = [{
    'name': 'Apple',
    'id': 1
  }, {
    'name': 'Orange',
    'id': 2
  }, {
    'name': 'Banana',
    'id': 3
  }, {
    'name': 'Mango',
    'id': 4
  }, ];
  $scope.submitForm = function() {

  }
}

// Code goes here for html
<!doctype html>
<html ng-app="App">

<head>
  <!-- css file -->
  <!--App file -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
  <!-- External file -->
</head>

<body>
  <div ng-controller="Ctrl">
    <form class="Scroller-Container">
      <div ng-app>

        <form class="Scroller-Container" ng-submit="submit()" ng-controller="Ctrl">
          <div>
            What would you like?
            <div ng-repeat="(key, val) in fruits">
              <input type="checkbox" ng-model="formData.selectedFruits[val.id]" name="group[]" id="group[{{val.id}}]" required />{{val.name}}
            </div>
            <br />
            <div ng-repeat="(key, val) in gender">
              <input type="radio" ng-model="$parent.formData.selectedGender" name="formData.selectedGender" id="{{val.id}}" value="{{val.id}}" required />{{val.name}}
            </div>
            <br />
          </div>
          <pre>{{formData.selectedFruits}}</pre>
          <input type="submit" id="submit" value="Submit" />
        </form>
      </div>
      <br>
    </form>
  </div>
</body>

</html>

这是 plunker 中的代码：http ://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview有没有人在 AngularJS 上做过这个？使复选框成为必需，迫使我选择所有复选框值。这个问题也没有记录在 AngularJS 文档中。

4个回答

如果您想要求选择组中的至少一项，则可以使用ng-required定义动态required属性。

对于性别单选按钮，这很容易：

<input
    type="radio"
    ng-model="formData.selectedGender"
    value="{{val.id}}"
    ng-required="!formData.selectedGender"
>

复选框组也很容易，如果您使用数组来存储选定的水果（只需检查数组长度），但是对于对象，有必要检查是否有任何值通过控制器中的过滤器或函数设置为 true：

$scope.someSelected = function (object) {
  return Object.keys(object).some(function (key) {
    return object[key];
  });
}

<input
    type="checkbox"
    value="{{val.id}}"
    ng-model="formData.selectedFruits[val.id]"
    ng-required="!someSelected(formData.selectedFruits)"
>

更新：

const someSelected = (object = {}) => Object.keys(object).some(key => object[key])

还要记住，如果值为 0，它将返回 false。

我怎样才能让这个返回显示一条消息，例如： <p ng-show="$scope.someSelected && addUserForm.submitted" class="help-block">Error.</p>
2021-03-29 08:50:46
嗨 Klaster_1。我不认为这是一个很好的解决方案。Wehn 我有一组复选框，它正在检查每个人。它没有经过优化，在 IE8 中您必须选择所有复选框为 required=true。我在@Fatih Hayrioglu 示例上添加了一个 console.log 以查看单击时添加了多少个控制台：示例
2021-04-01 08:50:46
@ArthurMastropietro，someSelected是一个函数，所以你需要从 angular expression: 调用它$scope.someSelected(yourData)，就像 in ng-required。
2021-04-01 08:50:46
object在检查密钥之前进行快速检查以确保存在。$scope.anySelected = function (object) { return object && Object.keys(object).some(function (key) { return object[key]; }); }
2021-04-04 08:50:46
@Klaster_1 如果我想连接到 Angular 的验证系统怎么办？即如果我想测试form.fruit.$error.required？我用你的解决方案试过了，但它不起作用。谢谢！
2021-04-06 08:50:46

感谢 Klaster_1 接受的答案。我已经通过ng-change在复选框输入上使用来设置本地范围变量来构建此变量，该变量将用作ng-required表达式。这可以防止someSelected()在每个摘要上运行。

这是一个 plunkr 演示：http ://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/

这是供后代使用的 HTML 和 JS。

<!DOCTYPE html>
<html ng-app="App">

<head>
  <meta charset="utf-8" />
  <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="AppCtrl">
    <form class="Scroller-Container" name="multipleCheckbox" novalidate="">
      <h3>What would you like?</h3>
      <div ng-repeat="fruit in fruits">
        <input type="checkbox" ng-model="formData.selectedFruits[fruit.name]" ng-change="checkboxChanged()" ng-required="!someSelected" /> {{fruit.name}}
      </div>
      <p style="color: red;" ng-show="multipleCheckbox.$error.required">You must choose one fruit</p>
    </form>
    <pre>Fruits model:
{{formData.selectedFruits | json}}</pre>
  </div>
</body>

</html>

angular
  .module('App', [])
  .controller('AppCtrl', function($scope) {

    var selectedFruits = {
      Mango: true
    };

    var calculateSomeSelected = function() {
      $scope.someSelected = Object.keys(selectedFruits).some(function(key) {
        return selectedFruits[key];
      });
    };

    $scope.formData = {
      selectedFruits: selectedFruits
    };

    $scope.fruits = [{
      'name': 'Apple'
    }, {
      'name': 'Orange'
    }, {
      'name': 'Banana'
    }, {
      'name': 'Mango'
    }];

    $scope.checkboxChanged = calculateSomeSelected;

    calculateSomeSelected();
  });

好吧，聚会可能很晚了，但是如果您正在查看一组对象，那么仅检查所选对象数组长度的解决方案对我有用。
HTML 

<div ng-repeat="vehicle in vehicles">
    <input type="checkbox" name="car" ng-model="car.ids[vehicle._id]" ng-required=" car.objects.length <= 0"> {{vehicle.model}} {{vehicle.brand}} <b>{{vehicle.geofenceName}}</b>
</div>

JS 

$scope.vehicles = [{},{}] // Your array of objects;
$scope.car = {
    ids: {},
    objects: []
};

$scope.$watch(function() {
    return $scope.car.ids;
}, function(value) {
    $scope.car.objects = [];
    angular.forEach($scope.car.ids, function(value, key) {
        value && $scope.car.objects.push(getCategoryById(key));
    });
}, true);

function getCategoryById(id) {
    for (var i = 0; i < $scope.vehicles.length; i++) {
        if ($scope.vehicles[i]._id == id) {
            return $scope.vehicles[i];
        }
    }
}

我了解此解决方案中发生的情况，您正在检查所有复选框选项以了解单击了哪个选项。但据我所知，这是迄今为止最简单的解决方案（理解和实施），如果您知道您的选择将受到限制，它就像一个魅力。获得更多时间优化的解决方案。检查上面的答案。

我们可以在不遍历所有复选框实例的情况下实现您的要求。这是示例代码

<script>
angular.module('atLeastOneExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.e = function(s){
    eval(s);
  };
}]);
</script>

在这里，我将 javascript eval 函数包装在“e”函数中以访问它。

<form name="myForm" ng-controller="ExampleController" ng-init="c=0">
  <label>
      Value1: <input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/>
  </label><br/>
  <label>
      Value2: <input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/>
  </label><br/>
  value = {{checkboxModel.value}}<br/>
  isAtLeastOneChecked = {{c>0}}
</form>
其它你可能感兴趣的问题
上一篇将选择值重置为默认值 下一篇Eclipse JavaScript 编辑器：js 文件的内容辅助、自动完成