How can I isolate nested form?

Question

I'm very new to AngularJS, and new to client side programming.

Context:

I'm implementing a contact form with support for multiple phone numbers and addresses.

It look like this:

<form name="contactInsertForm" ng-controller="contactInsertController as contactCtrlr" ng-submit="contactInsertForm.$valid && contactCtrlr.save()">
    <input type="text" name="name" />
    <phones-editor></phones-editor>
    <addresses-editor></addresses-editor>
    <input type="submit" />
</form>

phonesEditor and addressesEditor are custom Angular directives which implement support for adding, removing and editing phones and addresses. The controllers and modules look like this:

Addresses:

(function () {
    var app = angular.module("AddressesEditorModule", []);
    app.directive("addressesEditor", function () {
        return {
            restrict: "E",
            templateUrl: "/addressesEditorTemplate.html",
            controller: function ($scope) {
                this.addresses = [
                    // this will hold addresses.
                ];

                // ...
            }
        }
})();

Phones:

(function () {
    var app = angular.module("PhonesEditorModule", []);
    app.directive("phonesEditor", function () {
        return {
            restrict: "E",
            templateUrl: "/phonesEditorTemplate.html",
            controller: function ($scope) {
                this.phones = [
                    // this will hold phones.
                ];

                // ...
            }
        }
})();

And the templates:

Addresses:

<!-- list already added addresses -->
<div ng-repeat="address in addressesEditorCtrlr.addresses">
    <p>{{address.address}}</p>
    <p>{{address.city}}</p>
</div>
<form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
    <!-- inputs for each of the address fields -->
    <input type="submit" value="Add" />
</form>

Phones:

<!-- list already added phones -->
<div ng-repeat="phone in phonesEditorCtrlr.addresses">
    <p>{{phone.number}}</p>
    <p>{{phone.areaCode}}</p>
</div>
<form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
    <!-- inputs for each of the phone fields -->
    <input type="submit" value="Add" />
</form>

As you may have noticed, the generated at the browser HTML looks like this:

<form>
    <input type="text" name="name" />
    <phones-editor>
        <!-- list already added phones -->
        <div ng-repeat="phone in phonesEditorCtrlr.addresses">
            <p>{{phone.number}}</p>
            <p>{{phone.areaCode}}</p>
        </div>
        <form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
            <!-- inputs for each of the phone fields -->
            <input type="submit" value="Add" />
        </form>
    </phones-editor>
    <addresses-editor>
        <!-- list already added addresses -->
        <div ng-repeat="address in addressesEditorCtrlr.addresses">
            <p>{{address.address}}</p>
            <p>{{address.city}}</p>
        </div>
        <form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
            <!-- inputs for each of the address fields -->
            <input type="submit" value="Add" />
        </form>
    </addresses-editor>
</form>

The problem:

I have two form's inside a form. The nested forms work correctly, adding and validating values it should be doing, and refusing to add invalid phones/addresses.

But when I click the submit button at the outer form, it will interpret the inner forms input fields and will raise errors if these fields have invalid values.

How can I use AngularJS form handling and avoid this situation? Is this possible at all?

score 2 · Answer 1 · edited May 23 '17 at 11:52

2

you would need a directive if you want child form as isolate form. Have a look at answers from this SO question. please have a look at fiddle attached in this answer. I am putting the fiddle link here for you to js-fiddle to see it in action.

putting below code just because SO doesnt accept only fiddle links...

<form name="parent">
    <input type="text" ng-model="outside"/>
    <ng-form name="subform" isolate-form>
        <input type="text" ng-model="inside"/>
    </ng-form>
</form>

edited May 23 '17 at 11:52

Community

1
1

answered Aug 19 '14 at 17:19

harishr

17,807
9
78
125

This seems to be what I want, but my inner submit button do not work anymore. None of the examples had a submit button at the inner form. – Vinícius Gobbo A. de Oliveira Aug 19 '14 at 17:37
When I click at the inner submit, it does nothing, not even an error at the console. – Vinícius Gobbo A. de Oliveira Aug 19 '14 at 17:49
Yes, I'll update my question as soon as I finish it. – Vinícius Gobbo A. de Oliveira Aug 19 '14 at 17:58
[PLUNKER](http://plnkr.co/edit/qS0AYbiELRNeSswzn4v0?p=preview) outer form is valid and inner is invalid – harishr Aug 22 '14 at 17:37
Still, when you click the `Inner Submit` button, the outer form is submitted, not the inner as expected. The validation though works correctly. – Vinícius Gobbo A. de Oliveira Aug 23 '14 at 13:47
unfortunately there is no way to fix that... [read here](http://stackoverflow.com/questions/15937294/angularjs-how-to-trigger-submit-in-a-nested-form) – harishr Aug 23 '14 at 13:55
oh =/ thank you anyway... at last I have a better understanding of `ngForm`! – Vinícius Gobbo A. de Oliveira Aug 23 '14 at 14:05
please consider accepting the answers which takes question to logical conclusion... – Aug 26 '14 at 18:25
I'd probably just use a regular button and then post whatever data I'm interested in through AngularJS via ng-click. It's more work, but you'll be able to send only the data you want that button to send. In my case, my buttons all end up calling various API methods via factories to send data to and from the server. – Ellesedil Oct 12 '15 at 05:00

score 2 · Answer 2 · answered Jul 16 '18 at 15:38

Working on Angular 1.6

const isolatedFormDirective = () => {
    return {
        restrict: 'A',
        require: '?form',
        link: ($scope, $element, $attrs, ctrl) => {
            ctrl && ctrl.$$parentForm && ctrl.$$parentForm.$removeControl(ctrl);
        }
    }
}

app.directive('isolatedForm', isolatedFormDirective);

Brocco · Answer 3 · 2014-08-19T18:18:41.483

1

This article has exactly what you are looking for.

The basic gist is that you want to use the ngForm directive inside your form tag.

<div ng-form="outerForm">
  <input type="text" ng-model="main.outerFormText"/>
  <div ng-form="innerForm">
    <input type="text" ng-model="main.innerFormText" required/>
    <button type="button" ng-click="main.submit('innerForm')"
      ng-disabled="innerForm.$invalid">Inner Submit</button>
  </div>
  <button type="button" ng-click="main.submit('outerForm')"
    ng-disabled="outerForm.$invalid">Outer Submit</button>
</div>

Example plnkr

edited Aug 19 '14 at 18:18

answered Aug 19 '14 at 16:41

Brocco

62,737
12
70
76

1

If I understood correctly, `ngForm` will cause my outer form to check the validity of the inner form. What I want is it to completely ignore my inner form. – Vinícius Gobbo A. de Oliveira Aug 19 '14 at 17:35
If I remove the ng-disabled attributes, I'm still able to submit at the inner form, despite the required attribute being present. – Vinícius Gobbo A. de Oliveira Aug 19 '14 at 18:27

How can I isolate nested form?

3 Answers3