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 input
s 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 tr
s 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 Plnkr:https://plnkr.co/edit/xxiGTcQvUaLruj9DIU5w?p=preview 这篇关于TR 子组件中的 Angular2 FormGroup的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!,所以我把外面的 改成了 代码>:
<tr>
, so I changed the outer <tr>
to <tbody>
:<tbody dependent-row *ngFor="let dependent of dependents"
[dependent]='dependent' >
登录
关闭