Question

我有一系列表行，在ng-repeat内部有各种输入，我试图使用角度内置的表单验证来处理必填字段。一切都很好，除了当我删除数组中支持ng-repeat的一个项目时。

以下是我设置验证的方式

<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中，如果删除第一个表格行，您会注意到虽然最后一行仍然无效，但错误已附加到上面的行。然后当您填写最后一行以使其有效然后再次清空时，错误仍会显示在错误的行上。删除后续行只会将错误从实际的无效行中进一步移动，直到它们不会出现在桌面上。

我应该采用另一种方式来验证这些输入吗？

Answer 1

问题在于，您通常不会在内置角度指令中使用{{}}（插值）。所以将代码更改为：

<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

做一名侦探来核实： https://plnkr.co/edit/vuQiH4D8qUY9jVoThnCy?p=preview

ngRepeat中的角度形式验证

1 个答案: