CODEWITHSUNDEEP
javascriptangularjs
Jack Allen
Jack Allen

Reputation: 547

AngularJS: ng-form + ng-repeat-start

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/

Upvotes: 2

Views: 191

Answers (1)

Jack Allen
Jack Allen

Reputation: 547

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

Upvotes: 1

Related Questions