ng-repeat复选框的验证需要检查一次

Posted 2021-04-09

我想帮助解决这个问题。

我目前正在为我的申请进行验证。该应用程序是一个测验，我希望每个问题都是必需的（非空）。通过下拉列表和文本，我可以简单地检查表单是否是这种情况，但是对于复选框，有一些错误。它要求所有checbox在被认为有效之前进行一次检查。

我的代码：

<form name="testForm" novalidate ng-submit="vm.success(testForm)">

    <div ng-repeat="question in vm.currentQuestions">

          <div class="item-accordion" ng-repeat="choice in question.Answers">

            <ion-item class="item item-checkbox">
                <label class="checkbox">
                    <input type="checkbox" ng-model="placeholder" name="{{question.QuestionId}}" ng-change="vm.checkboxAnswer(choice)" ng-required="true">
                </label>
                    {{choice.Text}}
            </ion-item>

           </div>

    </div>

</form>

当我控制台登录表单控制器时，我可以看到此输入的验证检查，但是没有（$ valid，$ error，$ dirty）更改。我不明白为什么没有变化。只有当我检查了所有方框一次后，$ valid才会变为true，但如果只选中了1个复选框，我需要$ valid转为true。

答案

<div ng-repeat="question in vm.currentQuestions">

      <div class="item-accordion" ng-repeat="choice in question.Answers">

        <ion-item class="item item-checkbox">
            <label class="checkbox">
                <input type="checkbox" ng-model="checkbox" name="{{question.QuestionId}}" ng-change="vm.checkboxAnswer(choice)" ng-required="checkboxValidation()">
            </label>
                {{choice.Text}}
        </ion-item>

       </div>

</div>

您必须在控制器中将模型声明为空字符串：

$scope.checkbox="";

并且您必须声明由ng-required调用的返回方法：

$scope.checkboxValidation=function(){
if($scope.checkbox=='')
return true;
}

另一答案

您可以在ng-submit旁边使用另一个辅助函数，编写如下函数：

var questions = [];

function everyChecked() {
   var formValid = true;
   foreach(question in questions) {
        var currentQuestion = false;
        foreach(answer in question.answers) {
            currentQuestion = currentQuestion || answer.value
        }
       formValid = formValid && currentQuestion;
   }

   return formValid;
}

并将您的ng-submit更改为此ng-submit = vm.everyChecked() && vm.success(testForm)，您需要将ng-model的复选框正确绑定到对象字段以在验证函数中使用该值。