AngularJS: ng-form + ng-repeat-start

Question

I have a table with an ng-repeat-start that generates 4 rows per item in an array.

For each ng-repeat, I'm creating an ng-form to validate each item and generate error messages on a item by item basis.

What's the correct way to structure the HTML, so that the ng-form is accessible from all of the rows generated between the ng-repeat-start and the ng-repeat-end?

<ng-form name="allItemsForm" novalidate>
    <table>
        <thead>
            <tr>
                <th>Items</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-form="itemForm" ng-repeat-start="item in ctrl.items">
                <td>
                    <input ng-model="item.name" name="name" required />
                </td>
            </tr>
            <tr>
                <td>
                    <textarea ng-model="item.comment" name="comment" required></textarea>
                </td>
            </tr>
            <tr>
                <td>Error for name: {{ itemForm.name.$invalid }}</td>
            </tr>
            <tr ng-repeat-end>
                <td>Error for comment: {{ itemForm.comment.$invalid }}</td>
            </tr>
        </tbody>
    </table>

    <button type="submit" ng-disabled="allItemsForm.$invalid">
        SUBMIT
    </button>
</ng-form>

Example: https://jsfiddle.net/7163osn2/4/

'so that the ng-form is accessible from all of the rows', what do you want to achieve? — shershen, May 23 '16 at 16:55
@shershen i've added an example. I want to use the extra rows to hold information about the errors that appear in the first few rows. — Jack Allen, May 23 '16 at 16:59
```Error for comment: {{itemForm | json}}``` is available in those rows isn't it? — shershen, May 23 '16 at 17:31
@shershen yeah that's available! Annoyingly it only contains the validation objects for the "name" input in this example, but contains nothing about the "comment" input — Jack Allen, May 24 '16 at 08:11

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

According to this it's valid to have multiple tbody elements inside of a table. All td cells will still match up to their parent th cell as they would normally.

It also removes the need for the ng-repeat-start, so you're able to go back to the using a standard ng-repeat.

An update to my example in the original question: https://jsfiddle.net/7163osn2/5/

W3 HTML Markup reference

edited May 23 '17 at 12:07

Community

1
1

answered May 24 '16 at 09:16

Jack Allen

549
2
5
19

AngularJS: ng-form + ng-repeat-start

1 Answers1