3

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.

Improve this question
3
  • 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? Commented Dec 1, 2015 at 12:45
  • 1
    Your solution is here: stackoverflow.com/questions/1249688/… Commented Dec 1, 2015 at 12:47
  • 1
    Interesting enough, the 3rd example I showed in my question works quite well. Thanks @TjaartvanderWalt Commented Dec 1, 2015 at 13:17

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
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>
Improve this answer

Comments

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.

Improve this answer

4 Comments

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.
@MrLister Looking at this link it shows that the only browser not supporting it is IE. And yeah, I realise that is a huge only...sigh.
I'm not talking about the form attribute on the <button>. I'm talking about the <form> element in the <tr>.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.