how can I validate multiple ng-repeated ng-form

Question

I have a variable form list and want to display validation error messages outside of the list elements.

consider this template:

<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>

the validation error would only be displayed when the last ng-repeat is invalid. Put another way, gForm.invoiceForm points to the lastly created form in ng-repeat.

I've seen other questions related to this problem but they only suggest repeating the validation messages inside the ng-repeat. I need the message to be outside and displayed once only.

gkalpak · Accepted Answer · 2014-03-14 22:49:47Z

1

The way you have it, gForm.invoiceForm does refer to the last <tr> in ng-repeat. If you want to display the error when any of the amounts is invalid, you can use gForm.$invalid. In fact there is no need to use ng-form="invoiceForm" unless there are more requirements not evident from the current question's code.

Another problem is that, in order for Angular to recognize the input and apply its directive (and its magic consequently), the ng-model directive is required as well.

Adding the ng-model directive and changing the condition to gForm.$invalid solves the problem:

...
<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>
...

See, also, this short demo.

edited Mar 14, 2014 at 22:49

answered Mar 14, 2014 at 15:48

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

BiAiB Over a year ago

your example does only validate the last <tr>

gkalpak Over a year ago

It does when I try it. What do you mean it doesn't ? What happens when you try it (and what is the expected behaviour) ?

BiAiB Over a year ago

whatever I input in the first two fields (an empty string or "fsgfdgs" for example), the validation does not trigger.

gkalpak Over a year ago

Exactly ! Because it only validates the last <tr> (and neither of the first two is the last). Is it not what you wanted ?

BiAiB Over a year ago

no, what I want is: if any of the fields is invalid, then the invalidity message must be displayed

|

koolunix · Accepted Answer · 2014-03-14 23:27:36Z

Are you looking for something like this? Yes you need to use ng-model, but also you need a unique name:

<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>

Collectives™ on Stack Overflow

how can I validate multiple ng-repeated ng-form

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related