Question

我知道以前曾经问过这个问题，甚至在这里找到了一个很好的答案：

How to validate inputs dynamically created using ng-repeat, ng-show (angular)

但我无法让这个解决方案奏效。我在这里有一个例子 - 令人讨厌的是，现在jsFiddle和Plunkr似乎都已经失败了。

这是JS：

app.controller('DetailsCtrl', ['$scope', function($scope) {
    $scope.loading = false;
    $scope.formData = {
        lines: [{
            text: 'test.com'}]
    };
    $scope.addRow = function() {
      $scope.formData.lines.push({text:null});

    };
}]);

这是标记：

<body ng-controller="DetailsCtrl">
  <div>
    <form name="mainForm" novalidate class="form-vertical">
...some non-repeating inputs go in here...
      <div data-ng-repeat="line in formData.lines" data-ng-form="lineForm">

          <input type="text" name="myinput" data-ng-model="line.text" data-ng-required="true">
          <span data-ng-show="mainForm.lineForm.myinput.$error.required">Error!</span>


      </div>

      <a href='#' data-ng-click="addRow()">New Line</a>
    </form>
  </div>


</body>

你会注意到最初有一个带文字的文字输入 - 很棒。点击“新线”链接。因为新文本输入验证失败 - 两个文本输入都显示警告范围...我只想显示与一个空文本输入相关的一个范围。

Answer 1

由于AngularJS在输入名称上传递以暴露验证错误，并且您对所有输入使用了相同的名称，因此您将面临此问题。

因此您无法动态生成输入名称，而是可以使用ng-form（请参阅https://docs.angularjs.org/api/ng/directive/ngForm）。

<form name="mainForm" novalidate class="form-vertical">...some non-repeating inputs go in here...
    <div data-ng-repeat="line in formData.lines" data-ng-form="lineForm">
        <input type="text" name="myinput" data-ng-model="line.text" data-ng-required="true"> 
        <span data-ng-show="lineForm.myinput.$error.required">Error!</span>    
    </div> <a href='#' data-ng-click="addRow()">New Line</a>

</form>

修改即可。请注意，访问错误myinput.$error.required而不是lineForm.myinput.$error.required。

请结帐工作小提琴http://jsfiddle.net/Y9g4q/7/。

验证AngularJS表单中的重复输入

1 个答案: