Closing a modal when click on the form submit

Question

My modal holds a form and I want to close the modal when the user clicks the submit button. The simplified form looks like this:

<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
    <div class='modal-content'>
        <form ng-submit='submitModule(module)'>
            <div class='modal-body'>
                ...
            </div>
            <div class='modal-footer'>
                <button type='submit' class='btn btn-primary'>Run</button>
                <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
            </div>
        </form>
    </div>
</div>

You can see the two buttons. The close button uses data-dismiss='modal' which works fine. But I can't use that on the submit button, because that "cancels" out the ng-submit=submitModule() submission function; the modal will close but the function won't get called.

Would the solution be to close the modal from the submitModule() function? But how can I get a hold of the modal from there?

Solution 1

You can append as many method calls to the (ngSubmit) i.e

form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"

Solution 2

You can add one small jQuery code in your HTML file... Add onclick attribute in button.

<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
    <form ng-submit='submitModule(module)'>
        <div class='modal-body'>
            ...
        </div>
        <div class='modal-footer'>
            <button type='submit' class='btn btn-primary' onclick="$('.modal').modal('hide')">Run</button>
            <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
        </div>
    </form>
</div>

Comments

[Juicy]

I've added the ui-bootstrap.min.js in a <script> tag before my app.js, and I tried to include the library in my controller like this: angular.module('app', ['ui.bootstrap']) .controller('InputCtrl', function($scope, $http, InputSvc) {...} but I get this error: Error: [$injector:modulerr] Failed to instantiate module app due to [$injector:unpr] Unknown provider: $routeProvider

[Bryan]

Are you using angular router in your app? The error is related to the service $routeProvider which is provided by Angular router. The router is not provided in the main angular library. You are supposed to import another script to use it.

[Juicy]

Yes I am, my routes.js maps routes to my controllers and templates.

[Bryan]

Is it possible to place a working demo of your app on Plunker? It would make it easier to resolve the error and implement the modal code.