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>