Angular ng messages show errors on ng repeat form

Question

I want to generate inputs with ng repeat, the problem is when i have an error this is only apply on the last element, how can i make this apply per element?

<         


        

Answer 1

The ngMessage is like a switch case you need to pass the correct group to detect the error, when you create a form in angular he wraps the form by the name of the form and the name of your inputs for example:

<form name="myForm">
  <input name="myInput">
  <input name="myInput2">
  <input name="myInput3">
</form>

Wrap to something like this with there repective $error each:

myform = {
 myInput: {
  $error:{
   //...
  }
 },
 myInput2: {
   //...
 },
 myInput3:{
   //...
 },
   //...
}

You are using the name of the form, and not contain the real error of each element (contains an array with all relevant data of each error), you must usage the name of input names like this plunkr:

http://plnkr.co/edit/I43HTQeWZS85N55hXGfF?p=preview

HTML:

<form name="setPlayersForm">
  <div ng-repeat="player in players track by $index" class="name-input">
    <div ng-init="player.form_name='player'+player.id" ></div>
    <input type="text"
           placeholder="Your Name"
           ng-model="player.name"
           name="{{player.form_name}}"
           required/>


           <ng-messages for="setPlayersForm[player.form_name].$error" ng-if="setPlayersForm[player.form_name].$touched">
              <ng-message when="required" class="alert-box alert">This field is required</ng-message>
          </ng-messages>
  </div>
</form>

JS:

var app = angular.module('plunker', ['ngMessages']);

app.controller('MainCtrl', function($scope) {

  $scope.players = [{
    name: "jhon",
    id:1 
  },
  {
    name: "jhon1",
    id:2 
  },
  {
    name: "jhon2",
    id:3 
  },
  {
    name: "jhon3",
    id:4 
  }
    ];
});

Answer 2

I don't know if I understood your question but I use this approach to deal with inputs within ng-repeat. Consider the following codes

<form name="sampleForm" novalidate>
    <div ng-repeat="item in items">
        <input type="text" name="name{{$index}}" required ng-model="item.name">
        <div ng-messages="sampleForm['name'+$index].$error">
            <div ng-message="required" class="error">This field is required</div>
        </div>

        <input type="text" name="price{{$index}}" required ng-model="item.price">
        <div ng-messages="sampleForm['price'+$index].$error">
            <div ng-message="required" class="error">This field is required</div>
        </div>
    </div>
</form>

Just follow the code. Just comment below if there's somethings not clear

Answer 3

I'm using ng-form and do following :

1. Give the form name at the same level as ng-repeat
2. Give the name attribute to your controls

3. In the ng-message says formName.controlName.$error

   <div ng-form="setPlayersForm" ng-repeat="player in rp.KillerService.getPlayers() track by $index" class="name-input">
       <input type="text" name="playerName"
          placeholder="Your Name"
          ng-model="player.name"
          required/>
       <a class="fa fa-trash-o" ng-if="player.newPlayer" ng-click="rp.removePlayer(player)"></a>
   
       <ng-messages for="setPlayersForm.playerName.$error" ng-if="rp.submitted">
           <ng-message when="required" class="alert-box alert">This field is required</ng-message>
       </ng-messages>
   </div>