Question

请参阅以下链接

https://plnkr.co/edit/9HbLMBUw0Q6mj7oyCahP?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.NDCarray = [{val: ''}];

$scope.NDCadd = function() {
    $scope.NDCarray.unshift(
        {val: ''}
    );
};
$scope.data = angular.copy($scope.NDCarray);
$scope.NDCcancel=function(){debugger
  $scope.NDCarray=$scope.data;
}


$scope.NDCdelete = function(index) {
  if(index != $scope.NDCarray.length -1){
    $scope.NDCarray.splice(index, 1);
  }
};
});

它包含带有添加按钮的文本框。我添加了数字和必填字段的验证，它工作正常。但是当我点击添加按钮时，它将创建另一个带有输入值的文本框，当它显示所有文本框的验证消息时，我不想显示所有文本框的验证消息。需要仅显示相应文本框的验证。这意味着当我在第二个文本框中输入错误时，它只向该文本框显示消息。请参阅下面的屏幕截图。

显示所有文本框的验证消息。该文本框应仅显示一个文本框。

Answer 1

工作plnkr：https://plnkr.co/edit/f4kAdZSIsxWECd0i8LDT?p=preview

您的问题出现在您的HTML中，您必须获得独立的字段：

移出ng-repeat
在字段上使用$ index提供动态名称，因为name是使每个字段在验证时独立的原因。

以下是来自plnkr的最终HTML，我没有触及所有的javascript：

<body ng-controller="MainCtrl">
     <form name="myForm">
    <div ng-repeat ="ndc in NDCarray">
    <div class="col-sm-4 type7" style="font-size:14px;">
        <div style="margin-bottom:5px;">NDC9</div>

  <label>Number:
    <input type="number"  ng-model="ndc.value"
           min="0" max="99" name="{{'input_'+$index}}" required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$dirty && myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.number">
      Not valid number!</span>
  </div>
  <tt>value = {{example.value}}</tt><br/>
  <tt>myForm['input_{{$index}}'].$valid = {{myForm['input_'+$index].$valid}}</tt><br/>
  <tt>myForm['input_{{$index}}'].$error = {{myForm['input_'+$index].$error}}</tt><br/>

    </div>
    <div class="col-sm-4 type7 " style="font-size:14px;">
        <div style="padding-top:20px; display:block"> 
            <span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span> &nbsp; 
            <span>Cancel </span> &nbsp;  
            <span id="addRow" style="cursor:pointer" ng-click="NDCadd()">Add </span>
        </div>
    </div>
  </div>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>

   </form>
  </body>

Answer 2

一些变化：

如果您添加＆＃34;跟踪$ index＆＃34;对于你的ng-repeat，它将使每组元素都是唯一的，这样你就不必担心为元素派生唯一的名称。
您对号码的验证（myForm.ndcValue。$ error.number）无法正常工作，因此我将其更改为myForm.ndcValue。$ error.max || myForm.ndcValue。$ error.min
此外，您可以使用ng-repeat直接在div上抛出ng-form属性。

喜欢这样：

  <div ng-repeat="ndc in NDCarray track by $index" ng-form="myForm">
    <div class="col-sm-4 type7" style="font-size:14px;">
      <div style="margin-bottom:5px;">NDC9</div>

      <label>Number:
        <input type="number" ng-model="ndc.value" min="0" max="99" name="ndcValue" required>
      </label>
      <div role="alert">
       <span class="error" ng-show="myForm.ndcValue.$dirty && myForm.ndcValue.$error.required">
       Required!</span>
       <span class="error" ng-show="myForm.ndcValue.$error.max || myForm.ndcValue.$error.min">
       Not valid number!</span>
      </div>
      <tt>value = {{example.value}}</tt>
      <br/>
      <tt>myForm.ndcValue.$valid = {{myForm.ndcValue.$valid}}</tt>
      <br/>
      <tt>myForm.ndcValue.$error = {{myForm.ndcValue.$error}}</tt>
      <br/>

    </div>

这是工作plunker。

我更改了输入元素名称＆＃34;输入＆＃34;到＆＃34; ndcValue＆＃34;更容易混淆。

数据的文本框验证和重复模式角度js中所需的

2 个答案: