javascript - 如何验证多个 ng-repeated ng-form

Question

我有一个可变表单列表，并且想要在列表元素之外显示验证错误消息。

考虑这个模板:

<form name="gForm">
    <table>
        <tr ng-repeat="invoice in invoices" ng-form="invoiceForm">
            <td><input name="amount" type="number" max="200" /></td>
        </tr>
    </table>
    <div ng-show="gForm.invoiceForm.amount.$invalid">you must the money</div>
    <button ng-click="addInvoice()">add invoice</button>
</form>

仅当最后一次 ng-repeat 无效时才会显示验证错误。换句话说，gForm.invoiceForm 指向 ng-repeat 中最后创建的表单。

我已经看到与此问题相关的其他问题，但他们只建议在 ng-repeat 中重复验证消息。我需要将消息发送到外部并仅显示一次。

Answer 1

按照你的方式，gForm.invoiceForm确实指的是最后一个 <tr>在 ng-repeat 中。如果您想在任何金额无效时显示错误，可以使用 gForm.$invalid 。其实没必要用ng-form="invoiceForm"除非当前问题的代码中没有明显的更多要求。

另一个问题是，为了让 Angular 识别输入并应用其指令(及其魔力)， the ng-model directive is required 也是如此。

添加ng-model指令并将条件更改为 gForm.$invalid解决问题:

...
<tr ng-repeat="invoice in invoices">
    <td><input name="amount" type="number" max="200"
               ng-model="invoice.amount" /></td>
</tr>
...
<div ng-show="gForm.$invalid">you must the money</div>
...

另请参阅此 short demo 。