文本框验证数字并在重复模式下需要 angular js答案

【问题标题】：textbox validation for number and required in repeating mode angular js文本框验证数字并在重复模式下需要 angular js
【发布时间】：2016-05-24 19:49:47
【问题描述】：

请参考以下链接

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);
  }
};
});

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

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

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

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

您的问题在于您的 HTML，要获得独立的字段，您必须：

移出 ng-repeat 的形式
使用 $index 为您的字段提供动态名称，因为名称是使每个字段独立于验证的原因。

这是来自 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>

【讨论】：

它没有显示所需和无效号码的验证消息
每次只需将 myForm.input 更改为 myForm['input_'+$index] 即可。注意：你不会看到无效数字错误，因为字段强制有一个数字，但是你忘记处理 min & max 验证错误，它们将在 myForm['input_'+$index].$error.min & myForm['input_'+$index].$error.max

【解决方案2】：

几个变化：

如果您将“track by $index”添加到您的 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。

我将输入元素名称从“input”更改为“ndcValue”以减少混淆。

【讨论】：

它没有显示无效号码的验证消息
您有一个 min=0 和 max=99，所以我只是为超出该范围的任何内容设置验证。您还需要什么其他验证？
当我输入数字以外的字符时，它应该显示“无效数字”
在您的 plunker 中没有验证消息。甚至是必填字段
您可以将验证设置为您想要的任何内容，包括您最初拥有的内容 (myForm.ndcValue.$error.number)