AngularJS form input name validation not working in ngrepeat


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


var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.choices = [{no: '1234567890'}, {no: '0987654321'}];
  $scope.numberAdd = function() {
  $scope.numberRemove = function(item) {
    $scope.choices.splice(item, 1);
<link rel="stylesheet" href="" />
<script src="" data-semver="1.4.9"></script>
<div class="container" ng-app="plunker" ng-controller="MainCtrl">
  <form name="myform" class="form-inline">
    <div class="form-group" ng-repeat="choice in choices">
      <div class="input-group">
        <input type="text" class="form-control" ng-model="" 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 class="input-group-addon" ng-if="$last" ng-click="numberAdd()"><span class="glyphicon glyphicon-plus"></span>
      <span class="text-danger" ng-show="myform.number-{{$index+1}}.$invalid">Field required</span>
  <pre>{{choices | json}}</pre>


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 By – John Smith

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.