Accessing $scope.form.$setSubmitted not calling function in $scope.$context.behavior.leaving

[redaz808]

Hi,

I am not able to access any of the injected factories, services, values when the $scope.$context.behavior.leaving is called. Any idea why?

Example

angular.module('example',[]) .controller('Wizard1Ctrl',['$rootScope','$scope','$timeout','constants',function ($rootScope,$scope, $timeout, constants) {

$scope.submitForm = function(){ alert("Hello"); } $scope.$context.behavior.leaving = function(options, callback) { if (options.forward) { $scope.setupPersonalForm.$setSubmitted(); return callback($scope.setupPersonalForm.$valid); } else { return callback(true); } } })]);

Thanks!!

[shaunxu]

Hi redaz808,

I found you reported two questions in this issue (the previous one might be replaced by you I think). Please let me explain them one by one.

The first question you mentioned, "Dependency injection reference error", is because you forgot added the module which contains your constants in your main module. You defined example.constants, then in the definition of example module you need add it in the second parameter like this angular.module('example',['example.constants']).controller() { ... }

The second question, "Accessing $scope.form.$setSubmitted not calling". Please check your wizard template content, make sure you have your form element with the name was setupPersonalForm. Also please check the input fields inside your form with proper name attribute and ng-model attribute. Angular.js needs them to build underlying form and model controller which makes the validation works. Here's the document about Angular.js form validation. https://docs.angularjs.org/api/ng/type/form.FormController https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Here is the plunker I tried for your question. http://plnkr.co/edit/uMzrDMZ4HKEMSwfXiEGa?p=preview

Thanks, Shaun

[redaz808]

Hi Shaun

Thanks for your reply.

Regarding your reply for my first question, I did add the module in my main module. Its just because my example wasn't complete enough. For some reason , I can access the constants outside the function $scope.$context.behavior.leaving ( in the controller Wizard1Ctrl) however it returns undefined inside the function. I am not sure why.

For my second question, I did add a name to the form but I wanted the submitFunction of the form to be called. Example

When I do scope.exampleForm.$setSubmitted() the function scope.submitForm is not getting called.

Please see my comments below when I am not able to access the constants .controller('Wizard1Ctrl',['$rootScope','$scope','$timeout','constants',function ($rootScope,$scope, $timeout, constants) { $scope.submitForm = function(){ alert("Hello"); } // I CAN ACCESS CONSTANTS HERE $scope.$context.behavior.leaving = function(options, callback) { if (options.forward) { // I CANNOT ACCESS CONSTANTS HERE $scope.setupPersonalForm.$setSubmitted(); return callback($scope.setupPersonalForm.$valid); } else { return callback(true); } } })]);

Here is the plunker to replicate the issue: http://plnkr.co/edit/IJ4cOs7kX5zrBekb6lHx?p=preview

Notice in Wizard2Controller, I cannot access the mainService ..

Thanks, Reda

[shaunxu]

Hi Reda,

I checked your plunker and changed some code to make to works.

Your first question, this is because you didn't refer example.services in your example.controllers3 module. The definition of example.controllers3 module should be changed as below

var controllers3 = angular.module('example.controllers3',['example.services']);

Then you can use mainService in the controller inside and outside of $scope.$context.behavior.leaving as below.

  controllers3.controller('Wizard2Controller',['$scope','constants','mainService',function($scope,constants,mainService){
      //I CAN ACCESS MAINSERVICE HERE
      mainService.updateService()
        .then(function (result) {
          alert(angular.toJson(result));
        });
      $scope.$context.behavior.leaving = function(options, callback) {
        if (options.forward) {
          //I CANNOT ACCESS MAINSERVICE HERE
          mainService.updateService()
            .then(function (result) {
              alert(angular.toJson(result));
              $scope.myForm.$setSubmitted();
              if (!$scope.myForm.$valid) {
                alert('Validation failed.');
              }
              return callback($scope.myForm.$valid);
            });
        }
        else {
          return callback(true);
        }
      }
  }]);

About the module dependencies please check https://docs.angularjs.org/guide/di

Ref your second question, $setSubmitted() will NOT trigger your form to submitted. It just set a flag in FormController named $submitted to true. You need to invoke $scope.submitForm manually. You can check https://docs.angularjs.org/guide/forms for more information.

Thanks, Shaun