Repeated forms per table row using Angularjs

Question

So...I have literally scoured the internet looking for a solution to this problem and haven't found any answer that directly (or indirectly) suggests an answer.

I am trying to create multiple forms within a table with each row being wrapped in <form> tags like so

<tr ng-repeat="item in items">
     <form ng-submit="updateItem(item)">
           <td ng-bind="$index + 1"></td>
           <td ng-bind="item.title"></td>
           <td><button>Submit</button></td>
     </form>
</tr>

It seemed to work as intended until I realized that ng-repeat was not wrapping the <form> tag around the <td> tags and it ended up looking like so

<tr ng-repeat="item in items">
     ***<form ng-submit="updateItem(item)"></form>*** //The form tags were unwrapped
           <td ng-bind="$index + 1"></td>
           <td ng-bind="item.title"></td>
           <td>
              ***<button>Submit</button>*** //Buttons don't submit cos no form
           </td>
</tr>

whilst what I really want to achieve is something like

<tr>
    <form>
    <td>
        <button>Hi</button>
    </td>
    </form>
</tr>
<tr>
    <form>
    <td>
        <button>Hello</button>
    </td>
    </form>
</tr>

I would really love some help with how to deal with this.

I presume the reason for this is that you cant have a `form` tag directly in a `tr`. Why not put the `form` in the `td` tag? — Tjaart van der Walt, Dec 01 '15 at 12:45
Your solution is here: http://stackoverflow.com/questions/1249688/html-is-it-possible-to-have-a-form-tag-in-each-table-row-in-a-xhtml-valid-way — pegatron, Dec 01 '15 at 12:47
Interesting enough, the 3rd example I showed in my question works quite well. Thanks @TjaartvanderWalt — Cozzbie, Dec 01 '15 at 13:17

score 3 · Answer 1 · answered Dec 01 '15 at 12:48

3

You can unite cells:

<tr ng-repeat="item in items">
   <td colspan="3">
       <form ng-submit="updateItem(item)">
           ...
       </form>
   </td>
</tr>

Or use ngForm directive instead of form (and add submit on enter manually):

<tr ng-repeat="item in items" ng-form="myForm">
     <td ng-bind="$index + 1"></td>
     <td ng-bind="item.title"></td>
     <td><button type="button" ng-click="updateItem(item)">Submit</button></td>
</tr>

answered Dec 01 '15 at 12:48

karaxuna

26,752
13
82
117

The second approach is the only full angular solution and should be the accepted answer. Works in all browsers and you can also use myForm for validation of the row. – Gideon Mulder Jul 24 '17 at 09:13

pegatron · Answer 2 · 2015-12-01T13:59:37.063

3

You can add a new table in every row like this;

<table>
 <tr ng-repeat="item in items">
  <td>
    <form ng-submit="updateItem(item)">
     <table>
      <tr>
       <td ng-bind="$index + 1"></td>
       <td ng-bind="item.title"></td>
       <td><button>Submit</button></td>
      </tr>
     </table>
    </form>
  </td>
 </tr>
</table>

edited Dec 01 '15 at 13:59

answered Dec 01 '15 at 12:54

pegatron

516
4
16

score 0 · Accepted Answer · edited May 23 '17 at 12:17

0

Well, thanks to @pegatron and the Stack Overflow link he provided using @tjbp answer I ended up using the form attribute of input fields and that did it for me. Though its not been tested on all browsers, it does the trick of HTML5 validations. Here's what I ended up with.

<tr ng-repeat="item in items">
 <form ng-submit="updateItem(item)" id="{{item.title}}">
       <td ng-bind="$index + 1"></td>
       <td ng-bind="item.title"></td>
       <td><button form="{{item.title}}">Submit</button></td>
 </form></tr>

And with this the form and its linked inputs gets sent with the button click. Thanks.

edited May 23 '17 at 12:17

Community

1
1

answered Dec 01 '15 at 13:45

Cozzbie

1,014
2
12
26

With invalid HTML, are you absolutely sure that this will work the same in all browsers? Different browsers handle errors differently! So you will have to test very thoroughly, any time a new version of a browser is released. @Pegatron's solution and the linked answers were error-free HTML. – Mr Lister Dec 07 '15 at 08:39
@MrLister Looking at this [link](http://caniuse.com/form-attribute) it shows that the only browser not supporting it is IE. And yeah, I realise that is a huge only...sigh. – Cozzbie Dec 07 '15 at 09:52
I'm not talking about the `form` attribute on the ` – Mr Lister Dec 07 '15 at 09:53
Oh I get it now, Truth be told. the whole essence of it will be for targeted forms. So even if all rendered forms are generated elsewhere it really "shouldn't" matter as long the referenced $scopes are kept tangible. I will look at browser support for your concern doh. Its a very serious one. – Cozzbie Dec 07 '15 at 10:00

Repeated forms per table row using Angularjs

3 Answers3