Angular 表单在 table 中不起作用

Question

我创建了一个工作表格，放在 table 下方的 div 中；

<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>

然后我决定把表格移到上面的table；

<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>

但现在表格不再有效了。我做错了什么？

Answer 1

您的做法不会在页面上正确呈现 html，因为根据 table 标准，它的 html 无效。基本上在幕后 html 渲染器会在页面上渲染 html 时将其从 table 标记中抛出。因此，为了在 table 标签内包含表单，您可以使用 ng-form 属性而不是 form 元素。

但是通过使用 ng-form 指令，您不能使用 ng-submit 指令，您应该仅通过 button 提交表单。

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>

关于table结构的更详细的解答，可以参考

Angular 表单在 table 中不起作用

Angular form not working in a table

html

forms

html-table

angularjs

angularjs-forms