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确实引用了ng-repeat中的最后一个<tr>。如果要在任何金额无效时显示错误，可以使用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 。

Answer 2

你正在寻找这样的东西吗？是的，您需要使用ng-model，但您还需要一个唯一的名称：

<div ng-app="pageModule"
        ng-controller="parentCtrl">
        <form name="gForm">
            <table>
                <tr ng-repeat="invoice in invoices" ng-form="invoiceForm">
                    <td>{{invoice.name}}: <input name="invoice.name" required type="number" max="200" ng-model="invoice.amount" /></th>
                </tr>
            </table>
            <div ng-show="gForm.$invalid && showError">you must the money</div>
            <button ng-click="addInvoice()">add invoice</button>
        </form>
    </div>
    <script>

var pageModule = angular.module('pageModule',[])
.controller('parentCtrl',function($scope) {
    $scope.invoices = [
        { name : 'ford' },
        { name : 'chevy' },
        { name : 'honda' },
    ]
    $scope.showError = false;
    $scope.addInvoice = function() {
        $scope.showError = true;
        console.log('add invoice');
    }
})
    </script>

如何验证多重ng-repeat ng-form

2 个答案: