Question

我有一个表单，用户可以动态添加字段。这是我的HTML：

<body ng-controller="FruitController">
    <button type="button" ng-click="addFruit()">Add fruit</button>
    <form name="list">
      <div id="dynamicList" ng-repeat="fruit in fruits">
        <input type="text" name="fruitName" ng-model="fruit.name" ng-minlength="3"/>
      </div>
    </form>
</body>

这是我的控制者：

app.controller('FruitController', [function(){

  $scope.fruits = [
    {name: 'Apple', color: 'red'} 
  ];

  $scope.addFruit = function()
  {
    $scope.fruits.push({name: '', color: ''});
  };
}]);

因此，当一个字段无效时，我添加一个带有下一个指令的css类：

ng-class="{'uk-form-danger': (list.fruitName.$invalid && !list.fruitName.$pristine)}"

问题在于，当1个字段失败时，另一个字段也是如此。有什么想法吗？

Answer 1

ng-repeat内的表单无法直接使用。您需要为内部元素创建一个单独的表单，其形式将是外部表单{child} {/ 1}

list

设置动态字段的验证

1 个答案: