小编Ala*_*ion的帖子

ngRepeat 内的角度表单验证

我有一系列表行,其中有 ng-repeat 内的各种输入,我尝试使用 Angular 内置的表单验证来处理所需的字段。一切正常,除了当我删除数组中支持 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>
Run Code Online (Sandbox Code Playgroud)

Plunker 显示我的问题

https://plnkr.co/edit/Q1qyqlSG69EXR2lTrsHk

在 plunker 中,如果删除第一个表行,您会注意到虽然最后一行仍然无效,但错误已附加到上面的行。然后,当您填写最后一行以使其有效,然后再次清空它时,错误仍然显示在错误的行上。删除后续行只会使错误远离实际的无效行,直到它们根本不出现在表上。

我应该有其他方法来验证这些输入吗?

angularjs angularjs-ng-repeat angular-validation

4
推荐指数
1
解决办法
2960
查看次数