Question

如何在ng-repeat中创建表单并对ng-repeat中的每个项目进行验证？这是我尝试过但不起作用的。

<table class="table table-striped">
    <tr>
        <th>Name</th>
        <th></th>
    </tr>
    <tr ng-repeat="person in persons">
        <form class="form-inline" name="myForm" ng-submit="updatePerson(person)" novalidate>
            <td ng-class="{ 'has-error' : myForm.firstName.$error.required && !myForm.firstName.$pristine }">
                <input type="text" name="firstName" ng-model="person.firstName" maxlength="25" class="form-control" required />
            </td>
            <td><button type="submit" class="btn btn-default" ng-disabled="myForm.$invalid">Save</button></td>
        </form>
    </tr>
</table>

Answer 1

移动<form>标记，使其超出ng-repeat。你需要这样做b / c你将无法访问你从范围生成的所有表格...重复的最后一个表格将影响所有其他表格。

然后在ng-repeat内，您可以使用ng-form。这样做的目的是使ng-repeat中的每个表单控件都有一个本地FormController，用于进行验证。所有这些内部ng-forms都将与父<form>标记一起使用，以通知它某些元素是无效的，脏的等等。

<form name="myForm">
  <div ng-repeat="person in persons ng-form="innerForm">
    <td ng-class="{ 'has-error' : innerForm.firstName.$error.required && !innerForm.firstName.$pristine }">
      <input type="text" name="firstName" ng-model="person.firstName" maxlength="25" class="form-control" required />
    </td>
  </div>
</form>

在ng-repeat内进行验证的表格

1 个答案: