Angular2 FormGroup inside TR child component

问题

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.

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!

UPDATE

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

回答1:

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

来源：https://stackoverflow.com/questions/38463346/angular2-formgroup-inside-tr-child-component