Angular2 FormGroup inside TR child component

Question

I have a child *ngForin a table that I need to wrap with a FormGroup. Something like that.

<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 cannot figure out how to load a component from the parent template without starting the alignment of the header columns.

I tried with an element selector and an attribute selector, but there seems to be a road block anyway. If I use the attribute selector, <tr dependent-row>and remove trfrom the child I, then I can not wrap anything around mine inputto assign formGroup, or it messed up the columns. If I use an element selector <dependent-row></dependent-row>and put trinside the child component, as the example above, it just makes the table even worse by simply listing everything trinline.

, . , !

UPDATE

. tr dependent-row , - formGroup, , .

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

, .

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

Answer 1

, , - . , .

, , <tr>, <tr> <tbody>:

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

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