I have a dynamic form which is generated by data received from some api, you can see and example of it here, received data is like this:
$scope.users = [
{
name: 'one',
email: 'one@one.com'
},
{
name: '',
email: 'two@two.com'
},
{
name: '',
email: 'three@three.com'
}
];
I create a dynamic form for these items, but I have a problem that my validation messages are not shown correctly, they are similar to this one:
<form name="usersForm">
<div ng-form="subForm" ng-repeat="user in users">
<input name="name" type="text" ng-model="user.name" required />
<p ng-if="subForm.name.$invalid && subForm.name.$touched">
name is required
</p>
<input name="email" type="email" ng-model="user.email" required />
<p ng-if="subForm.email.$invalid && subForm.email.$touched">
email is required
</p>
</div>
</form>
as you can see in plunkr, I have used two approaches for doing this , one is using ng-form
and the other using interpolation in form input names:
<form name="usersForm2">
<div ng-repeat="user in users track by $index">
<input name="name{{$index}}" type="text" ng-model="user.name" required />
<p ng-if="usersForm2['name' + $index].$invalid && usersForm2['name' + $index].$touched">
name is required
</p>
<input name="email" type="email" ng-model="user.email" required />
<p ng-if="usersForm2['email' + $index].$invalid && usersForm2['email' + $index].$touched">
email is required
</p>
</div>
</form>
How can I show my validation messages to user(when the form is loaded or rendered)?