AngularJSのグループチェックボックス検証

チェックボックスのリストがあり、そのうちの少なくとも1つは必須です。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のドキュメントにも記載されていません。

T J
編集された質問 23日 5月 2016 в 7:57
プログラミング
javascript jquery angularjs
28日 10月 2013 в 10:58
18 ビュー
ソリューション

グループ内の少なくとも1つの項目が選択されていることを必要とする場合、ng-requiredで動的なrequired属性を定義することが可能です。

性別のラジオボタンの場合、これは簡単でしょう。

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

チェックボックスグループも、配列を使って選択された果実を格納するのであれば簡単ですが（配列の長さをチェックするだけ）、オブジェクトの場合は、コントローラでフィルタや関数を使って、いずれかの値が真に設定されているかどうかをチェックする必要があります。

$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)"
>

Update:

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

また、valueが0の場合はfalseを返すことに注意してください。

Klaster_1
編集した答え 27日 1月 2016 в 5:02
解説 (8)

Klaster_1さん、快諾の回答ありがとうございます。チェックボックスの入力に ng-change を使ってローカルスコープ変数を設定し、それを ng-required 式として使用することで、これを構築しました。これにより、すべてのダイジェストで someSelected() が実行されるのを防ぐことができます。

以下は、これを実演するプランクルです： http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/

以下は後世に残すためのHTMLとJSです。





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



  <div ng-controller="AppCtrl">

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

    <pre>Fruits model:
{{formData.selectedFruits | json}}</pre>
  </div>



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();
  });
解説 (0)

すべてのチェックボックスのインスタンスをトラバースすることなく、要件を実現することができます。 以下はサンプルコードです。

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

ここでは、javascriptのeval関数を"e"関数でラップしてアクセスするようにしています。



      Value1: <input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/>
  <br/>

      Value2: <input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/>
  <br/>
  value = {{checkboxModel.value}}<br/>
  isAtLeastOneChecked = {{c>0}}
解説 (0)