См. Ниже ссылку
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);
}
};
});
Он содержит текстовое поле с кнопкой добавления. Я добавил подтверждение для числа и требуемого поля, он работает нормально. но когда я нажму кнопку "Добавить", он создаст еще одно текстовое поле с введенным значением, которое покажет сообщение проверки для всех текстовых полей, я не хочу показывать сообщение проверки для всех текстовых полей. необходимо показать подтверждение только для соответствующего текстового поля. это означает, что когда я ввожу что-то не так во втором текстовом поле, он показывает сообщение только этому текстовому окну.
отображение валидации для всех текстовых полей. Это должно отображаться только для одного текстового поля.
Рабочий plnkr: https://plnkr.co/edit/f4kAdZSIsxWECd0i8LDT?p=preview
Ваша проблема в вашем HTML, чтобы получить независимые поля, вы должны:
Вот окончательный HTML из plnkr, я не касался всего 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>
<span>Cancel </span>
<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>
Пара изменений:
Если вы добавите "track by $ index" к вашему ng-repeat, он сделает каждую группу элементов уникальной, так что вам не придется беспокоиться о получении уникальных имен для элементов.
Ваша проверка на число (myForm.ndcValue. $ Error.number) не работала, поэтому я поменял ее на myForm.ndcValue. $ Error.max || myForm.ndcValue. $ error.min
Кроме того, вы можете передать атрибут ng-form непосредственно в div с помощью ng-repeat.
Как это:
<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>
Здесь рабочий плункер.
Я изменил имя входного элемента с "input" на "ndcValue", чтобы быть менее запутанным.
min
иmax
ошибки проверки. Они будут находиться подmyForm['input_'+$index].$error.min
&myForm['input_'+$index].$error.max