TR child 组件内的 Angular2 FormGroup

Question

我在 table 中有一个 *ngFor child 行组件，我需要用 FormGroup 包装它。像这样。

<tr [formGroup]='dependentForm'>
  <td>
    <input type="text"  formControlName="first_name">
  </td>
  <td>
    <input type="text"  formControlName="last_name">
  </td>
  <td>
    <input type="text" formControlName="dob">
  </td>
</tr>

但我无法弄清楚如何从 parent 模板加载组件而不弄乱 header 列对齐。

我试过使用元素选择器和属性选择器，但似乎都存在障碍。如果我使用属性选择器 <tr dependent-row>，并从 child 中删除 tr，那么我就无法在 input 周围包装任何东西来分配 formGroup 或它弄乱了列。如果我使用元素选择器 <dependent-row></dependent-row> 并将 tr 放在 child 组件中，就像上面的示例一样，这只会让 table 变得更糟，只需列出所有 trs 内联。

我希望我已经充分描述了我的问题。感谢观看！

更新

这是一个使用属性选择器的示例。 dependent-row 组件中的 tr 标签正在丢弃 table 列，但我需要一些东西来添加 formGroup，所以我不确定如何正确处理它。

https://plnkr.co/edit/oXxkUGKtVp0T1u4Qz8AX?p=preview

这是使用元素选择器的替代方法。

https://plnkr.co/edit/qSLP5kVPLIWYdT19qset?p=preview

Answer 1

我找到了一个修复程序，但不确定它是否会导致任何副作用。毕竟我不是 table 人。

我认为问题是因为你嵌套了<tr>，所以我把外面的<tr>改成了<tbody>:

<tbody dependent-row *ngFor="let dependent of dependents"
    [dependent]='dependent' >

Plnkr：https://plnkr.co/edit/xxiGTcQvUaLruj9DIU5w?p=preview

TR child 组件内的 Angular2 FormGroup

Angular2 FormGroup inside TR child component

angular2-forms

angular