So I have read a few posts on this topic and haven't quite figured it out. I tried to implement the solution found at https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform but had no success. the validation does add the ng-invalid class to the element but it does not show the error message using ng-show. Heres what I've got so far.
First off here's a plnkr: http://plnkr.co/edit/0Xh0o82N1xQc7Qi5Mhfe?p=preview
<h1>Dynamic Field</h1>
<div ng-controller="EmailCtrl">
<hr>
<a ng-click="addEmail()" href="#">Add Email</a>
<hr>
<form name="email_form">
<label>Main Form
<input type="email" ng-model="test.email" name="email" />
<div class="help-block" ng-show="email_form.email.$touched">
<span ng-show="email_form.email.$error.email">ERROR</span>
</div>
<p></p>
<div ng-repeat="email in emails">
<ng-form="sub_form">
sub form <input name="sub_email" type="email" ng-model="email.email" />
<div class="help-block" ng-show="sub_form.sub_email.$touched">
<span ng-show="sub_form.sub_email.$error.email">ERROR</span>
</div>
<a ng-click="removeEmail($index)" href="#">Remove Email</a>
</ng-form>
</div>
</label>
</form>
<ng-form="sub_form>
</ng-form>
should be:
<ng-form name="sub_form">
</ng-form>
Hope it helps !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.