Angular form not working in a table

Question

I created a working form placed in a div below a table;

<div class="row">
  <form class="form-signin" ng-submit="controller.add.save()">
    <h2 class="form-signin-heading">Add an item:</h2>
    <label for="inputName" class="sr-only">Name</label>
    <input type="text" name="name" id="inputName" class="form-control" placeholder="Name" required autofocus ng-model="controller.add.name">
    <label for="inputDescription" class="sr-only">Description</label>
    <textarea name="description" id="inputDescription" class="form-control" placeholder="Description" ng-model="controller.add.description">
    </textarea>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Add</button>
  </form>
</div>

I then decided to move the form into the table above;

<tr>
  <form ng-submit="controller.add.save()">
    <td>Add an item</td>
    <td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
    <td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
    <td><button class="btn btn-xs btn-primary" type="submit">Add</button></td>
  </form>
</tr>

But now the form doesn't work anymore. What am I doing wrong?

Answer 1

The way you are doing, will not render the html correctly on the page, because its invalid html as per table standards. Basically behind the scene html renderer will throw out this from out of the table tag while rendering the html on page. So for having form inside table tag, you could use ng-form attribute instead of having form element.

But by using ng-form directive you can't have ng-submit directive, you should submit a form via button only.

Html

<tr ng-form="myForm">
    <td>Add an item</td>
    <td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
    <td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
    <td><button class="btn btn-xs btn-primary" type="button" ng-click="controller.add.save()">Add</button></td>
</tr>

For more detailed answer about structuring of table, you could refer this answer