ngRepeat中的角度表单验证

我有一系列的表格行在ng-repeat中有不同的输入，我试图使用内置在表单验证中的角度来处理必需的字段。除了当我删除支持ng-repeat的数组中的项目之外，一切都很好。ngRepeat中的角度表单验证

这里是如何我已经设置了我的验证

<td ng-class="{ 'has-error' : vm.testForm.itemName{{$index}}.$invalid }"> 
    <input type="text" 
     name="itemName{{$index}}" 
     class="form-control" 
     ng-model="item.name" 
     required /> 
    <div class="help-block" 
     ng-show="vm.testForm.itemName{{$index}}.$invalid" 
     ng-messages="vm.testForm['itemName'+$index].$error"> 
    <span ng-message="required">Name is required</span> 
    </div> 
</td>

Plunker显示我的问题

https://plnkr.co/edit/Q1qyqlSG69EXR2lTrsHk

在plunker，如果删除第一个表行，你会发现尽管最后一行仍然无效，但错误已经附加到上面的行中。然后，当您填写最后一行以使其有效并再次清空时，错误仍显示在错误的行上。删除后续行只是将错误从实际的无效行进一步移动，直到它们完全不出现在表上。

我还有另外一种方法来验证这些输入吗？

来源

2017-01-09 Alarion

结帐[这]（HTTP：/ /stackoverflow.com/questions/19859959/validating-nested-form-in-angular#answer-19860312）回答。 'ng-form'的确有用。 – user2718281

问题是，你不通常在构建的角度指令中使用{{}}（插值）。所以，你的代码更改为：

<td ng-class="{ 'has-error' : vm.testForm['itemName' + $index].$invalid }"> 
<input type="text" 
     name="itemName{{$index}}" 
     class="form-control" 
     ng-model="item.name" 
     required /> 
<div class="help-block" 
     ng-show="vm.testForm['itemName' + $index].$invalid" 
     ng-messages="vm.testForm['itemName'+$index].$error"> 
    <span ng-message="required">Name is required</span> 
</div> 
</td>

变化：

vm.testForm.itemName{{$index}}.$invalid

要：

vm.testForm['itemName' + $index].$invalid

发了plunker验证： https://plnkr.co/edit/vuQiH4D8qUY9jVoThnCy?p=preview

来源

2017-01-10 00:52:11

完美的作品。我感到很蠢，因为我已经在ng-messages属性中使用了这种语法，并没有想到在ng-show和ng-class上尝试它。：）非常感谢。 – Alarion

ngRepeat中的角度表单验证

回答

相关问题