AngularJS form input name validation not working in ngrepeat

Question

name="number-{{$index+1}}" working in ng-repeat at the same time myform.number-{{$index+1}}.$invalid does not working for the form

Demo: http://plnkr.co/edit/Z3EmpHu8w2iZcZko9dJv?p=preview

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.choices = [{no: '1234567890'}, {no: '0987654321'}]; $scope.numberAdd = function() { $scope.choices.push({'no':''}); }; $scope.numberRemove = function(item) { $scope.choices.splice(item, 1); }; }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> <div class="container" ng-app="plunker" ng-controller="MainCtrl"> <form name="myform" class="form-inline"> <br> <div class="form-group" ng-repeat="choice in choices"> <div class="input-group"> <input type="text" class="form-control" ng-model="choice.no" name="number-{{$index+1}}" placeholder="Mobile number {{$index+1}}" required> <div class="input-group-addon" ng-if="!$last" ng-click="numberRemove(choice)"><span class="glyphicon glyphicon-minus"></span> </div> <div class="input-group-addon" ng-if="$last" ng-click="numberAdd()"><span class="glyphicon glyphicon-plus"></span> </div> </div> <span class="text-danger" ng-show="myform.number-{{$index+1}}.$invalid">Field required</span> </div> </form> <br> <pre>{{choices | json}}</pre> </div> 

Answer 1

ng-show accepts an expression . You could write it like this:

<span class="text-danger" ng-show="myform['number-' + ($index + 1)].$invalid">Field required</span>

Updated demo here .

Answer 2

I added "track by $index" to your ng-repeat to make elements unique and moved form element to div with ng-repeat using ng-repeat. No controller changes needed.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<div class="container" ng-app="plunker" ng-controller="MainCtrl">
    <div class="form-inline" ng-repeat="choice in choices track by $index" ng-form="myform">
     <div class="form-group">  
        <div class="input-group">
            <input type="text" class="form-control" ng-model="choice.no" name="number" placeholder="Mobile number {{$index+1}}" required>
            <div class="input-group-addon" ng-if="!$last" ng-click="numberRemove(choice)"><span class="glyphicon glyphicon-minus"></span>
            </div>
            <div class="input-group-addon" ng-if="$last" ng-click="numberAdd()"><span class="glyphicon glyphicon-plus"></span>
            </div>
          </div>
          <span class="text-danger" ng-show="myform.number.$invalid">Field required</span>
        </div>
      </div>
  <br>
  <pre>{{choices | json}}</pre>
</div>