ng-repeat 中的 AngularJS 表单验证答案

【问题标题】：AngularJS Form Validation inside an ng-repeatng-repeat 中的 AngularJS 表单验证
【发布时间】：2015-05-21 09:08:21
【问题描述】：

所以我正在尝试验证 ng-repeat 中一项的输入。例如，假设我有 5 个项目 (1,2,3,4,5)，我只想在选择第 4 个项目时验证表单。

我之前使用过 ng-pattern 来验证表单，但没有使用下拉菜单来选择 item.name 的表单

我已经在 ng-pattern 中包含了我想要验证第 4 项的正则表达式。

<div>
  <select name="name" ng-model="item.name" ng-options="item for item in items" required></select>
</div>

<div>
  <input name="results" type="text" ng-model="item.results" ng-pattern="/^\d\d\d\/\d\d\d/" required>
</div>

任何有关验证这种情况的正确方法的建议将不胜感激。我曾考虑过创建一个指令来验证这一点，但感觉这是一个过于复杂的解决方案，因为我不会在这个应用程序中多次使用该指令。

/////////////////////////////////////// ///

它不会让我回答我自己的问题，所以这是我想出的答案。

我最终要做的是使用 ng-pattern 并将其传递给一个函数。

<input name="results" type="text" ng-model="vital.results" ng-pattern="vitalRegEx()" required>

这是控制器代码

$scope.item4RegEx = /^\d{2,3}\/\d{2,3}$/;

  $scope.itemRegEx = function() {
    if($scope.item && $scope.item.name === "fourth item")
      return $scope.item4RegEx;
    else return (/^$/);
  };

【问题讨论】：

您可以编写一个指令，在选择小部件上执行选择或模糊事件上的函数。

标签： validation angularjs

【解决方案1】：

要不然……

在调用控制器方法的选择下拉列表中添加 ng-change 指令，并且该控制器方法设置一个标志是否验证表单。

例如。

<select ng-change="checkIfFormShouldbeValidated()" ng-model="item.name"></select>

// Inside controller
$scope.checkIfFromShouldBeValidated = function(){
   if( $scope.item.name == 4th Item ) $scope.shouldValidate = true;
   else $scope.shouldValidate = false;
};


$scope.formSubmit = function(){ 
    if(($scope.shouldValidate && form.$valid) || (!$scope.shouldValidate)){
        // Submit Form  
    } 
};

看看有没有帮助。

【讨论】：

【解决方案2】：

我在控制器中编写了这个递归函数来检查所有子作用域的有效性。

function allValid(scope) {
    var valid = true;
    if (scope.$$childHead) {
        valid = valid && allValid(scope.$$childHead);
    }
    if (scope.$$nextSibling) {
        valid = valid && allValid(scope.$$nextSibling);
    }
    if (scope.scorePlannerForm) {
        valid = valid && scope.myForm.$valid;
    }
    return valid;
}

然后在我的控制器中，我用控制器范围检查这个。

function formSubmit() {
      if (allValid($scope)) {
           // perform save
      }
}

【讨论】：