Angular JS dynamic table generation issue with error class

Question

Hi all I have used the following example to generate dynamic table as per my need

https://jsfiddle.net/shanidkv/vbft1sc4/

Modified the table as per my own with my own error class

<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected" /></td>
<td>
<div class="form-group" ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.firstname)}">
<div class="col-sm-12">
<input type="text" name="firstname" class="form-control" ng-model="personalDetail.fname" required />
<span class="help-block" ng-show="loginForm.firstname.$error.required">Required</span>
 </div>
</div>
</td>
<td>
<div class="form-group" ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.lastname)}">
 <div class="col-sm-12">  <input type="text" name="lastname" class="form-control" ng-model="personalDetail.lname" required />
 <span class="help-block" ng-show="loginForm.lastname.$error.required">Required</span></div>
</div>

Required

Every thing works fine but when I add a second row after filling the data validation is not firing can some one help me

First click of Save

After filling data if I add another row validation for second row is not applying

Answer 1

The problem is, All the input box for first name/last name/email is creating for the same name. so during validation it is not able to recognized the current empty field.

Better solution, you can create a directive which will be added to the text box which will check the field validation and put the error class accordingly.