Accessing Angular Bootstrap Modal Form From Controller

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'

Solution 1:

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}"}>

Solution 2:

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:

<formname="myForm"novalidateng-submit="submit(myForm)"><divclass="modal-header"><h3>I'm a modal!</h3></div><divclass="modal-body"><inputtype="email"value="hello"></div><divclass="modal-footer"><buttonclass="btn btn-primary"type="submit">OK</button><buttonclass="btn btn-warning"ng-click="cancel()">Cancel</button></div></form>

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

Solution 3:

In your controller add at the top:

$scope.form = {};

In the html template:

<formname="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

Solution 4:

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)}}