extending angularjs form controller

Question

I have multiple child ng-form which are part of parent ng-form, I want to set the $submitted status of all the child forms, when I set the parent ng-form to $submitted status.

As of now no such method is available on the form-controller, checked here

Lets say, if I want to extend the current form controller to do this, how should I do that? how do I add a new method $setChildFormsToSubmittedState() ? of course I want to do it without disturbing/touching the angular code.

Is it possible? I think it should be given all the child forms hook into parent form using $addControl();.

No idea from where to start.

make a directive,and attach listener there for parent form submission.. — Ved
– Ved, Commented Jan 3, 2015 at 5:23

ryeballar · Accepted Answer · 2015-01-03 06:57:05Z

4

You can create a directive that appends a functionality to the form controller. Simply create a method that iterates over all the controls by checking if an item has a $$parentForm property that is equal to the form object it belongs to.

DEMO

Javascript

  .directive('myForm', function() {

    return {
      require: 'form',
      link: function(scope, elem, attr, form) {
        form.__setSubmitted = function() {
          setSubmitted(form);
        };

        function setSubmitted(form) {
          form.$submitted = true;
          angular.forEach(form, function(item) {
            if(item && item.$$parentForm === form) {
              setSubmitted(item);
            }
          });
        }
      }
    };

  });

HTML

<form name="myForm" my-form ng-submit="myForm.__setSubmitted()">
  <ng-form name="mySubForm1">
    <input type="text" ng-model="data.something1" name="something">
    {{mySubForm1.$submitted}}
  </ng-form>
  <br>

  <ng-form name="mySubForm2">
    <input type="text" ng-model="data.something2" name="something">
    {{mySubForm2.$submitted}}
  </ng-form>
  <br>

  <button type="submit">Button</button>
  {{myForm.$submitted}}
</form>

answered Jan 3, 2015 at 6:57

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

4 Comments

harishr Over a year ago

it works, just one query. why angular.forEach(form,. form is an object, then why do we need forEach on it?

ryeballar Over a year ago

The AngularJS docuemntation states: angular.forEach, Invokes the iterator function once for each item in obj collection, which can be either an object or an array.

harishr Over a year ago

ok, so you mean, the form can sometime be collection, hence we need forEach.

ryeballar Over a year ago

The form controller is an object that holds a collection of controls and ngModels.

Collectives™ on Stack Overflow

extending angularjs form controller

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related