TR子组件内的Angular2 FormGroup

Question

我*ngFor在表中有一个子行组件,我需要用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>

但我无法弄清楚如何从父模板加载组件,而不会弄乱标题列对齐.

我尝试过使用元素选择器和属性选择器,但似乎有一个障碍.如果我使用属性选择器,<tr dependent-row>并tr从子项中删除我然后无法在我的inputs 周围包装任何东西来分配一个formGroup或它弄乱了列.如果我使用一个元素选择器<dependent-row></dependent-row>并将其tr放在子组件内部,就像上面的示例一样,那只是通过列出所有tr内联来使表更糟糕.

我希望我已经很好地描述了我的问题.谢谢你的期待!

UPDATE

这是使用属性选择器的示例.组件中的tr标签dependent-row抛弃了表列,但我需要添加一些东西formGroup,所以我不知道如何正确处理它.

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

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

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

Answer 1

我找到了一个修复,但不确定它是否会引起任何副作用.毕竟我不是桌上人.

我认为问题是因为你有嵌套<tr>,所以我把外部更改<tr>为<tbody>:

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

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