ng yinelemesinde AngularJS doğrulamaları formu

Question

Yineleme yinelemesinden gelen alanlardan doğrulamaları yapmakta sorun yaşıyorum. Bir hatayı tatmin ettiğimde, aynı alandaki her alan da tatmin olur. Bunu yapmanın başka bir yolu var mı? Ng-modelini ad yerine doğrulama göstergesi olarak kullanmak gibi mi?

HTML

<div ng-app="angularjs-starter" ng-controller="MainCtrl"> 
    <form name="myForm" novalidate > 
    <fieldset data-ng-repeat="choice in choices"> 
     <input type="text" ng-model="choice.name" name="fieldname" placeholder="Enter mobile number" required> 
     <span ng-hide="!myForm.fieldname.$error.required">THIS FIELD IS REQUIRED {{ myForm.fieldname.$error.required }}</span> 
     <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> 
    </fieldset> 
    <button class="addfields" ng-click="addNewChoice()">Add fields</button> 

    <div id="choicesDisplay"> 
     {{ choices }} 
    </div> 
</div> 

JS

var app = angular.module('angularjs-starter', []); 

    app.controller('MainCtrl', function($scope) { 

    $scope.choices = [{id: 'choice1'}, {id: 'choice2'}]; 

    $scope.addNewChoice = function() { 
     var newItemNo = $scope.choices.length+1; 
     $scope.choices.push({'id':'choice'+newItemNo}); 
    }; 

    $scope.removeChoice = function() { 
     var lastItem = $scope.choices.length-1; 
     $scope.choices.splice(lastItem); 
    }; 

}); 

PS:

İşte benim kodudur. Bu az çabayla yapılabilir

Answer 1

<div ng-app="angularjs-starter" ng-controller="MainCtrl"> 
    <form name="myForm" novalidate > 
    <fieldset data-ng-repeat="choice in choices" data-ng-form="nestedMyForm" > 
     <input type="text" ng-model="choice.name" name="fieldname" placeholder="Enter mobile number" required> 
     <span ng-hide="!nestedMyForm.fieldname.$error.required">THIS FIELD IS REQUIRED {{ nestedMyForm.fieldname.$error.required }}</span> 
     <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> 
    </fieldset> 
    <button class="addfields" ng-click="addNewChoice()">Add fields</button> 

    <div id="choicesDisplay"> 
     {{ choices }} 
    </div> 
</div> 

Kontrol ben

Answer 2

Ben eklemeden bunu yapabilirsiniz sanmıyorum eğer

Bu artımlı ile girişin adı niteliğini manipüle yapılabilir ama acaba farkındayım isim alanında artış. Sen hile yapmak gerekir

<input type="text" ng-model="choice.name" name="fieldname_{{$index}}" required> 

Answer 3

böyle bir şey ile kolayca yapabilirsiniz - i olmaya alan adını nasıl değiştiğini fark - tarla + $ endeksi yüzden ng-tekrarı

içindeki her yineleme betweeen farkı söyleyebilirim

<div ng-app="angularjs-starter" ng-controller="MainCtrl"> <form name="myForm" novalidate > <fieldset data-ng-repeat="choice in choices"> 
     <input type="text" ng-model="choice.name" ng-init="vm.name='field'+$index" name="{{vm.name}}" placeholder="Enter mobile number" required> 
     <span ng-hide="!myForm.{{vm.name}}.$error.required">THIS FIELD IS REQUIRED {{ myForm.{{vm.name}}.$error.required }}</span> 
     <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> </fieldset> <button class="addfields" ng-click="addNewChoice()">Add fields</button> 

    <div id="choicesDisplay"> 
     {{ choices }} </div> </div>