Angular Form Validation On Dynamically Added And Removed Form Fields In Angular 1.5.7

Question

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>

Rathma · Accepted Answer · 2016-07-18 19:20:37Z

1

<ng-form="sub_form>
</ng-form>

should be:

<ng-form name="sub_form">
</ng-form>

Hope it helps !

edited Jul 18, 2016 at 19:20

answered Jul 18, 2016 at 19:10

Rathma

1,3212 gold badges34 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OGZCoder Over a year ago

yup...its always something so simple...i really hate it when i miss a friggin semi-colon..lol

Rathma Over a year ago

@OGJoshZero it took me about 30 minutes :)

Collectives™ on Stack Overflow

Angular Form Validation On Dynamically Added And Removed Form Fields In Angular 1.5.7

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related