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>

John Smith · Accepted Answer · 2016-05-24 19:52:50Z

4

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.

answered May 24, 2016 at 19:52

John Smith

2,3414 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbrown · Accepted Answer · 2016-05-24 19:56:38Z

1

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>

answered May 24, 2016 at 19:56

jbrown

3,0351 gold badge17 silver badges22 bronze badges

2 Comments

Mo. Over a year ago

Is it ideal using same name for all the input fields ?

jbrown Over a year ago

Yes because they are unique to the DOM with 'track by $index'. Deriving names using $index isn't necessary if you include 'track by $index'. Placement of the form element was also key.

Collectives™ on Stack Overflow

AngularJS form input name validation not working in ngrepeat

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related