12

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?

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

3 Answers 3

41

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

1
  • 3
    This is really the best answer.
    – Scottie
    Feb 20, 2016 at 17:13
2

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 
  }
    ];
});
2
  • This is very verbose way i does not think this is the angular way
    – user4207046
    Mar 2, 2015 at 14:01
  • Yes, i know but in angular the form error management is verbose. Recently i found a module called angular-formly and start to migrate all my forms to this new module. If you wanna go for the native options read this: yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html Mar 2, 2015 at 14:06
2

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>
    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.