AngularJS validations form on ng-repeat

Question

I am having trouble on making validations from fields coming from a ng-repeat. Once I satisfy an error, every field with the same is as well satisfied. Is there any other way to do this? Like using the ng-model as validation indicator instead of name?

Here is my code:

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.

I am aware that this can be done by manipulating the name attribute of the input with incremental but I was wondering if this can be done with less effort

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>

Check how I added data-ng-form="nestedMyForm" hope that should work

Answer 2

I don't think you can do it without adding a increment on the name field. You can do it easily with something like

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

Answer 3

this should do the trick - notice how i changed the field name to be - field+$index so we can tell the difference betweeen each iteration inside the ng-repeat

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