Question

我正在尝试实现以下行为。我有一个表单，我想要求至少填写一个复选框或文本字段。我试图用以下代码来做这件事，但我不知道我做错了什么。提前谢谢。

https://jsfiddle.net/AlexLavriv/mc8fj4f9/

// Code goes here
var app = angular.module('App', []).controller("Ctrl", Ctrl); 
function Ctrl($scope) {

$scope.formData = {};

$scope.formData.selectedFruits = {};

$scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];

$scope.someSelected = function (object) {
   console.log(object);
    for (var i in object)
    {
        if (object[i]){
        return true;
        }

    }


return false;
}

$scope.submitForm = function() {
    console.log($scope.formData.selectedFruits);
}
}


<div ng-controller="Ctrl" >
    <form class="Scroller-Container" name="multipleCheckbox" novalidate >
        <div ng-app>
          <div ng-controller="Ctrl">
              <div>
                What would you like?
                <div ng-repeat="(key, val) in fruits">
                    <input type="checkbox" ng-model="formData.selectedFruits[val.name]">
                      {{val.name}}
                </div>
                <p class="error" ng-show="submitted && multipleCheckbox.$error.required">Select check box or input text</p>
               </div>
               <pre>{{formData.selectedFruits}}</pre>
 <input type="text"  ng-required="!someSelected(formData.selectedFruits)" />
               <input type="submit" id="submit" value="Submit" ng-click="submitted=true" />
            </div>
          </div>
    </form>
</div>

Answer 1

~~您不能将ng-required与函数~~

一起使用

您可以在此处找到另一种解决方案：https://jsfiddle.net/mc8fj4f9/2/

var app = angular.module('App', []).controller("Ctrl", Ctrl); 
function Ctrl($scope) {

 $scope.formData = {};

    $scope.formData.selectedFruits = {};

    $scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];

    $scope.submited=false;

    $scope.someSelected = function (object) {
       console.log(object);
        for (var i in object)
        {
            if (object[i]){
              $scope.checkboxSelected =true;
              return true;
            }

        }

      $scope.checkboxSelected =false;
      return false;
    }

    $scope.submitForm = function() {
        console.log("submit "+ $scope.formData.selectedFruits);
        $scope.submitted=true;
        $scope.someSelected($scope.formData.selectedFruits);     

    }
}



<div ng-controller="Ctrl" >
        <form class="Scroller-Container" name="multipleCheckbox" novalidate>
            <div ng-app>
              <div ng-controller="Ctrl">
                  <div>
                    What would you like?
                    <div ng-repeat="(key, val) in fruits">
                        <input type="checkbox" ng-model="formData.selectedFruits[val.name]" ng-required = "!inputVal">
                          {{val.name}}
                    </div>
                    <p class="error" ng-show="submitted && !checkboxSelected && !inputVal">Select check box or input text</p>
                   </div>
                   <pre>{{formData.selectedFruits}}</pre>
     <input type="text"  ng-required="!checkboxSelected" ng-model="inputVal"/>
                   <input type="submit" id="submit" value="Submit" ng-click="submitForm()" />
                </div>
              </div>
        </form>
    </div>

角度输入类型文本或至少一个复选框验证

1 个答案: