文本框验证数字，并且在重复模式下需要角度js

Question

Please refer below link 请参考以下链接

https://plnkr.co/edit/9HbLMBUw0Q6mj7oyCahP?p=preview 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);
  }
};
});

It contains the textbox with add button. 它包含带有添加按钮的文本框。 I have added validation for number and required field, it is working fine. 我添加了对数字和必填字段的验证，它工作正常。 but when i click add button it will create another textbox with entered value that time it showing the validation message for all the textboxes , i don't want to show validation message for all the textboxes. 但是，当我单击添加按钮时，它将创建另一个具有输入值的文本框，该文本框将显示所有文本框的验证消息，而我不想显示所有文本框的验证消息。 need to show validation for corresponding textbox only. 只需要显示对相应文本框的验证。 that means when i enter something wrong in second textbox it is showing message to that textbox only.refer below screenshot. 这意味着当我在第二个文本框中输入错误时，它仅向该文本框显示消息。请参阅下面的屏幕截图。

validation message displaying for all textboxes.that should display for only one textbox. 显示所有文本框的验证消息。只应显示一个文本框。

Answer 1

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

Your problem is in your HTML, to get independant fields you must : 您的问题出在HTML中，要获取独立字段，您必须：

Move outside the form of the ng-repeat 移出ng-repeat的形式
Provide a dynamic name using $index on your fields, because name is what make each fields independant on the validation. 在字段上使用$ index提供一个动态名称，因为名称是使每个字段独立于验证的原因。

Here is the final HTML from the plnkr i didn't touch at all the javascript : 这是来自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

Couple of changes: 几个更改：

If you add "track by $index" to your ng-repeat it will make each group of elements unique so that you don't have to worry about deriving unique names for elements. 如果在ng-repeat中添加“ track by $ index”，它将使每组元素都是唯一的，因此您不必担心派生元素的唯一名称。
Your validation on the number (myForm.ndcValue.$error.number) didn't work so I changed it to myForm.ndcValue.$error.max || 您对数字（myForm.ndcValue。$ error.number）的验证无效，因此我将其更改为myForm.ndcValue。$ error.max || myForm.ndcValue.$error.min myForm.ndcValue。$ error.min
Also, you can throw an ng-form attribute directly on the div with your ng-repeat. 另外，您可以使用ng-repeat直接在div上抛出ng-form属性。

Like this: 像这样：

  <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>

Here's the working plunker . 这是工作中的小伙子。

I changed the input element name from "input" to "ndcValue" to be less confusing. 我将输入元素名称从“ input”更改为“ ndcValue”，以减少混乱。

文本框验证数字，并且在重复模式下需要角度js

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-05-24 11:19:57

解决方案2
1 2016-05-24 11:49:47

文本框验证数字，并且在重复模式下需要角度js

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-05-24 11:19:57

解决方案2 1 2016-05-24 11:49:47

解决方案1
1 已采纳 2016-05-24 11:19:57

解决方案2
1 2016-05-24 11:49:47