TR子组件内部的Angular2 FormGroup [英] Angular2 FormGroup inside TR child component
问题描述
我在表中有一个*ngFor
子行组件,需要用FormGroup包装.像这样的东西.
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.
我尝试了使用元素选择器和属性选择器,但似乎都存在障碍.如果我使用属性选择器<tr dependent-row>
并从子级中删除tr
,那么我将无法在input
周围包裹任何内容以将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.
我认为问题是因为您嵌套了<tr>
,所以我将外部<tr>
更改为<tbody>
:
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屋!