So I have this code below

<form name="registrationForm">
<div class="form-inline" ng-repeat="participant in participantsArray">
        <div class="form-group">
          <input ng-model="datas.name[$index+1]" name="name{{$index+1}}" required verify-name>
          <span ng-if="registrationForm.name+($index+1).$dirty && registrationForm.name+($index+1).$invalid">error</span>
        </div>
</div>
</form>

and is not working, how do I need to use the $index expression in the ng-if? the ng-model, and the name are working properly ...

So I have this code below

<form name="registrationForm">
<div class="form-inline" ng-repeat="participant in participantsArray">
        <div class="form-group">
          <input ng-model="datas.name[$index+1]" name="name{{$index+1}}" required verify-name>
          <span ng-if="registrationForm.name+($index+1).$dirty && registrationForm.name+($index+1).$invalid">error</span>
        </div>
</div>
</form>

and is not working, how do I need to use the $index expression in the ng-if? the ng-model, and the name are working properly ...

• javascript
• html
• angularjs

• What you need to do in this code and what is the output of it ? – ZAhmed Commented Aug 10, 2017 at 8:50
• What is the angularjs version you have ? – Anil Yadav Commented Aug 10, 2017 at 8:53
• Why can't you save the value in scope and pass it here? – Hema Nandagopal Commented Aug 10, 2017 at 8:53
• It should work. I reckon you are using a older version of AngularJS 1.x – Devesh Sati Commented Aug 10, 2017 at 8:54
• I want to add participants for an event, and the output is correct, but I don t know how to add the $index in ng-if expression – Darius Buhai Commented Aug 10, 2017 at 8:55

3 Answers 3

For dynamic fields you can use [] to wrap the dynamic string field.

registrationForm['name'+($index+1)].$dirty

refer the below example:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.items = ['a','b','c','d'];
  });

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <form name="registrationForm">
    <div ng-repeat="item in items">
      <input ng-model="datas.name[$index+1]" name="name{{$index+1}}" required verify-name>
      <span ng-if="registrationForm['name'+($index+1)].$dirty && registrationForm['name'+($index+1)].$invalid">error</span>
    </div>
  </form>
</div>

I ran into a same problem once. What you can do is instead of dot(.) notation use bracket notation to access the form controls. Thats what worked for me. Below is a example. Try this this will work. Let know if you need help.

registrationForm['name'+($index+1)].$dirty

Hope it Helps :)

Try this :)

<span ng-if="registrationForm['name'+($index+1)].$dirty && registrationForm.name+($index+1).$invalid">error</span>