TR 子组件中的 Angular2 FormGroup [英] Angular2 FormGroup inside TR child component

问题描述

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

I have an *ngFor child row component in a table that I need to wrap with a FormGroup. Something like this.

<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>

但我不知道如何从父模板加载组件而不会使标题列对齐.

But I can't figure out how to load the component from the parent template without it messing up the header columns alignment.

我已经尝试过使用元素选择器和属性选择器，但无论哪种方式似乎都有障碍.如果我使用属性选择器 <trdependent-row>，并从孩子中删除 tr，那么我将无法在我的 input<周围包裹任何东西/code>s 将 formGroup 分配给它，否则会弄乱列.如果我使用元素选择器 <dependent-row></dependent-row> 并将 tr 放在子组件中，就像上面的示例一样，那只会使仅仅列出所有 tr 的内联表甚至更糟.

I've tried with an element selector and an attribute selector but there seems to be a roadblock either way. If I use an attribute selector, <tr dependent-row>, and remove the tr from the child I then can't wrap anything around my inputs to assign a formGroup to or it messes up the columns. If I use an element selector <dependent-row></dependent-row> and put the tr inside the child component like the sample above, that just makes the table even worse by just listing all the trs inline.

我希望我已经足够好地描述了我的问题.感谢观看！

I hope I've described my problem well enough. Thanks for looking!

更新

这是一个使用属性选择器的示例.dependent-row 组件中的 tr 标签正在抛弃表格列，但我需要添加一个 formGroup 到其中，所以我不是确定如何正确处理这个问题.

Here's an example using an attribute selector. The tr tags in the dependent-row component are throwing off the table columns but I need something to add a formGroup to so I'm not sure how to properly handle this.

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

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

Here is the alternative method using an element selector.

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

推荐答案

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

I found a fix, but not sure if it causes any side effect. I'm not the table man after all.

我觉得问题是因为你嵌套了，所以我把外面的改成了代码>:

I think the problem is because you have nested <tr>, so I changed the outer <tr> to <tbody>:

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

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

这篇关于TR 子组件中的 Angular2 FormGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！