Angularjs - How to submit a form from different controller?

Question

<div ng-controller="ctrl1">
    <form name="form1" ng-submit="submitForm()">
        <input type="text" name="email" />
    </form>
</div>

<div ng-controller="ctrl2">
    <button> Submit </button>
</div>

Here from ctrl2, I want to trigger form submit action for a form which is in ctrl1

How to achieve this in angularJs?

Probably the most straightforward way is to emit an event on the $rootScope, like answered here http://stackoverflow.com/a/19498009/3459298 . If you want to avoid this, say because you don't want to polute the rootScope or you are worried about performance, maybe you want to choose to implement your event bus as a service, also specified here http://stackoverflow.com/a/27410307/3459298 . — Eduardo Páez Rubio, Nov 09 '16 at 10:52
This example will surely help you to submit from different controller using $controller service. Check the sample you will get idea...---> [Submit from different controller](http://stackoverflow.com/questions/40477112/ionic-angularjs-calling-methods-via-template-outside-of-controller/40483559#40483559) — Pitchiah Natarajan, Nov 09 '16 at 11:13

score 0 · Answer 1 · answered Nov 09 '16 at 10:51

0

You could emit an event on the button click and then use rootscope to broadcast it down - ctrl1 could then listen for this an submit the form in response.

answered Nov 09 '16 at 10:51

theleebriggs

571
2
5

Chathura Widanage · Answer 2 · 2016-11-09T11:18:08.763

0

You can emit an event from the second controller and listen to it in the first controller.

function CtrlOne($rootScope) 
{
  $rootScope.$on('submitEvent', function(event, args) {
      //submit your form here
  });
}

function CtrlTwo($scope,$rootScope) 
{
  $scope.submit=function(){
    $rootScope.$emit('submitEvent', args);
  }
}

<div ng-controller="CtrlOne">
    <form name="form1" ng-submit="submitForm()">
        <input type="text" name="email" />
    </form>
</div>

<div ng-controller="CtrlTwo">
    <button ng-click="submit()"> Submit </button>
</div>

edited Nov 09 '16 at 11:18

answered Nov 09 '16 at 10:52

Chathura Widanage

653
5
14

I don't see how this example can work. The two controllers are in different scopes (the events are not going to reach sibling scopes) and also the submit function is not reachable since the controller instance is not published using the `as` syntax. – Eduardo Páez Rubio Nov 09 '16 at 11:02

score 0 · Answer 3 · answered Nov 09 '16 at 10:54

You can achieve using $rootScope or services or event brodcasting

app.controller('ctrl2',['$scope','$rootScope',function($scope,$rootScope) {
    $scope.submitForm = $rootScope.mainSubmit();
}]);

app.run(function($rootScope){
    $rootScope.mainSubmit =function(){
        console.log("hey");
    };
})

Angularjs - How to submit a form from different controller?

3 Answers3