Angular2中的FormGroup在TR子组件内

4

我在表格中有一个*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,那么我就无法在我的input周围包装任何东西来分配formGroup,否则它会破坏列。如果我使用元素选择器<dependent-row></dependent-row>,并像上面的示例一样将tr放在子组件中,那只会通过在一行中列出所有tr来使表格变得更糟。
我希望我已经足够清楚地描述了我的问题。谢谢您的关注!
更新
这里是使用属性选择器的示例。 dependent-row组件中的tr标签会扰乱表格列,但我需要添加一个formGroup,所以我不确定如何正确处理此问题。

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

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

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


我不明白问题出在哪里(可能只有我)。那么,提供一个 Plunker,展示你想要实现的内容和你遇到的问题如何? - Günter Zöchbauer
1个回答

6
我找到了一个解决方法,但不确定是否会有任何副作用。毕竟我不是表格专家。 我认为问题是因为您嵌套了,所以我将外部的更改为:
<tbody dependent-row *ngFor="let dependent of dependents"
    [dependent]='dependent' >

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

这是一个Plnkr的链接,可用于在线编辑和分享Web应用程序。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接