TR子组件内的Angular2 FormGroup答案

【问题标题】：Angular2 FormGroup inside TR child componentTR子组件内的Angular2 FormGroup
【发布时间】：2016-11-22 15:11:12
【问题描述】：

我在需要用 FormGroup 包装的表中有一个 *ngFor 子行组件。像这样的。

<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 放在上面的示例中的子组件中，那么仅列出所有trs 内联会使表格变得更糟。

我希望我已经很好地描述了我的问题。感谢收看！

更新

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

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

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

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

【问题讨论】：

我不明白问题出在哪里（可能只有我一个人）。如果 Plunker 能够展示您尝试完成的工作以及遇到的问题，该怎么办？

标签： angular angular2-forms

【解决方案1】：

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

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

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

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

【讨论】：