I'm using Angular 2 and I want to validate controls in each row separately. But I'm not getting any way to do that. I want it to be done using reactive forms only and not using template-driven approach. I want [formGroup] on each <tr>. Any help will be appreciated. Below is the structure of my code:
<tbody *ngFor="let single of allTeamDetails"
[ngClass]="{'alternate-row-color': $even}">
<tr>
<td class="td-data first-column">
<input type="text" class="input-text form-control"
[value]="single.first_name">
</td>
<td class="td-data second-column">
<input type="text" class="input-text form-control"
[value]="single.last_name">
</td>
<td class="td-data third-column">
<input type="email" class="input-text form-control"
[value]="single.email">
</td>
<td class="td-data fourth-column">
<select class="selection-dropdown width-80-percent"
[value]="single.user_role">
<option *ngFor="let singleRole of allUserRole"
value="{{singleRole.name}}">
{{setUserRoleAndType(singleRole.name)}}</option>
</select>
</td>
<td class="td-data fifth-column" >
<input type="password" class="input-text form-control">
</td>
<td class="td-data sixth-column" >
<input type="password" class="input-text form-control">
</td>
<td class="td-data save-send-tm-data">
<button class="btn save-user-details save-sub-account-details"
type="button" data-toggle="tooltip" title="Save">
<i class="fa fa-floppy-o" aria-hidden="true"></i>
</button>
</td>
<td class="td-data save-send-tm-data">
<button type="button"
class="btn save-user-details save-sub-account-details"
data-toggle="tooltip" title="Send Message"
(click)="openSendMessageModal(single.email)">
<i class="fa fa-envelope" aria-hidden="true"></i>
</button>
</td>
<tr>
</tbody>