javascript - 删除表单元素时,AngularJS 验证不同步

标签 javascript angularjs

我有一个简单的表单,它显示具有多个输入的表单,并且能够删除这些输入。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.numbers = [1,2,3];

    $scope.deleteField = function (number) {
      $scope.numbers.splice($scope.numbers.indexOf(number), 1);
    }
});

对元素进行“必需”验证:

  <form name="theForm">
      <div ng-repeat="number in numbers">
        <input type="text" name="number{{$index}}" ng-model="number" required/>
        <button ng-click="deleteField(number)">Delete</button>
        <span ng-show="theForm.number{{$index}}.$error.required">Number is required</span>
      </div>
  </form>

验证工作正常,直到我删除条目。删除完成后,验证将不同步(错误消息显示在错误的字段上或根本不显示)。

这是运行示例:

http://plnkr.co/edit/wF6c79xAwcZnPAxjf2bW?p=preview

最佳答案

只需在 ng-repeat 中添加track by $index

关于javascript - 删除表单元素时,AngularJS 验证不同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27933708/

相关文章:

javascript - 将 CSS 应用于动态命名的元素

javascript - 不在站点根目录下时使用routeProvider

javascript - Angular Material $mdDialog 隐藏一次后不显示

javascript - 如何使用 jQuery.javascript 触发 react 选择输入下拉列表

javascript - 根据 AngularJS 中的当前 View 上下文对 Javascript 事件应用操作

javascript - 不同 knockout 组件之间的转换

javascript - ng-repeat 重复元素但不显示 ng-view 内的内容

javascript - 在riotjs中加载外部库

javascript - Angular 2+ 中的 Angular 粘性状态

javascript - sap.m.Table 工厂函数与 "this" View 上下文