Angular ng сообщения показывают ошибки в форме повторения ng

Я хочу генерировать входы с ng repeat, проблема в том, что когда у меня есть ошибка, это применимо только к последнему элементу, как я могу сделать это применительно к элементу?

<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>

Ответ 1

Я не знаю, понял ли я ваш вопрос, но я использую этот подход для обработки входных данных в ng-repeat. Рассмотрим следующие коды

<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>

Просто следуй коду. Просто прокомментируйте ниже, если что-то не ясно

Ответ 2

ngMessage как случай переключения, вам нужно передать правильную группу для обнаружения ошибки, когда вы создаете форму в angular, он обертывает форму по имени формы и имени ваших входов, например:

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

Оберните что-нибудь вроде этого с каждой вероятной $-ой ошибкой:

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

Вы используете имя формы и не должны содержать действительную ошибку каждого элемента (содержит массив со всеми соответствующими данными каждой ошибки), вы должны использовать имя входных имен, подобных этому 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 
  }
    ];
});

Ответ 3

Я использую ng-form и делаю следующее:

Дайте имя формы на том же уровне, что и ng-repeat
Дайте атрибуту name своим элементам управления

В сообщении ng указано 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>