Accessing angular bootstrap modal form from controller

Question

I am trying to access the form from the modal controller (Plunkr) but myForm doesn't seem to be accessible. How to get alert call to work:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl          
    });       
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function() {
    // How to get this?
   alert($scope.myForm.$dirty);
  };

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

And template:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
          <form name="myForm" novalidate>
          <input type="email" value="hello">
          </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="submit()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

score 18 · Answer 1 · answered Apr 13 '14 at 15:59

Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.

You can try to attach form to parent scope with (Angular 1.2.16):

<form name="$parent.userForm">

The userForm is created and available in modal's controller $scope. Thanks to scope inheritance userForm access stays untouched in the markup.

<div ng-class="{'has-error': userForm.email.$invalid}"}>

score 17 · Accepted Answer · edited Oct 02 '15 at 12:50

This was an known bug in ui-bootstrap. So injecting $modalInstance works fine now.

Workaround is to pass form instance to the submit function explicitly:

<form name="myForm" novalidate ng-submit="submit(myForm)">
  <div class="modal-header">
    <h3>I'm a modal!</h3>
  </div>
  <div class="modal-body">
    <input type="email" value="hello">
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" type="submit">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</form>

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function(myForm) {
   alert(myForm.$dirty);
  };
};

This is already fixed in ui-bootstrap 0.12. No workarounds needed anymore. — kriskodzi, Nov 24 '14 at 15:52

score 2 · Answer 3 · edited May 23 '17 at 12:16

2

In your controller add at the top:

$scope.form = {};

In the html template:

<form name="form.yourFormName">

Validation on html elements:

<div ng-class="{'has-error': form.yourFormName.email.$invalid}"}>

See also:

AngularJS modal dialog form object is undefined in controller

edited May 23 '17 at 12:16

Community

1
1

answered Jun 27 '14 at 13:10

Zymotik

6,412
3
39
48

Nice work-around - prevents angular from creating the form object on the transcluded scope, because it has already been inherited from the parent. – Dan King Apr 01 '16 at 09:25
1

Hmm - except if your controller's scope is also inheriting from a parent scope, then you might be overwriting an already-inherited form. I think this would be better: `$scope.form = $scope.form || {}` – Dan King Apr 01 '16 at 09:37
I meant "hiding", rather than "overwriting" of course - not likely to be a problem in most cases, but you never know... – Dan King Apr 01 '16 at 09:52

score 0 · Answer 4 · answered Aug 15 '14 at 22:14

In the end I went with the answer given by gertas, but the following is another way of resolving this.

//place a method on modal controller scope

        $scope.setFormReference = function (myForm) {
            $scope.myForm = myForm
        };

//call this using an angular expression in your modal template

       {{ setFormReference(loginForm)}}

Accessing angular bootstrap modal form from controller

4 Answers4

Linked