Angular ng消息显示ng重复表单上的错误

Question

我想用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>

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

只需按照代码.如果有些事情不清楚,请在下面评论

Answer 2

ngMessage 就像一个 switch case，您需要传递正确的组来检测错误，当您以 Angular 创建表单时，他会通过表单名称和输入名称来包装表单，例如：

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

包装成类似这样的内容，每个都有相应的 $error ：

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

您使用的是表单的名称，并且不包含每个元素的真实错误（包含每个错误的所有相关数据的数组），您必须使用输入名称的名称，如下所示：

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 
  }
    ];
});