tbody内的表单标签不起作用答案

【问题标题】：Form tag inside tbody not workingtbody内的表单标签不起作用
【发布时间】：2017-06-17 01:56:45
【问题描述】：

我有一张桌子。它有一行输入字段作为表格单元格。但是当表单加载到表格中时，它会显示在表格的单个单元格中，而不是整行中。

具有表单的子组件：

<form [formGroup]="dependentForm">
  <td>
    <input type="text" size="10" formControlName="first">
  </td>
  <td>
    <input type="text" size="10" formControlName="last">
  </td>
  <td>
    <input type="text" size="10" formControlName="dob">
  </td>
</form>

加载子组件的父组件：

<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>DOB</th>
    </tr>
  </thead>
  <tbody dependent-row></tbody>
</table>

【问题讨论】：

那是无效的 HTML。除了<tr> 和<template> 在<tbody> 内，您不能有任何其他标签
我认为你可以通过两种方式来这里。第一：使用 div 和 css 来模仿您的表格，而不是真实的表格。这允许您尝试实现的目标。第二：如果可能，将
开始和结束标签放在整个表格周围，这也应该可以。

标签： forms angular html-table

【解决方案1】：

看起来您不需要使用<form> 元素。只需将ngForm 或formGroup 添加到<tr>

<tr ngForm>

或

<tr [ngFormGroup]="myForm"

我自己还没试过

【讨论】：