angularjs form inside bootstrap modal popup

Question

I have a form inside a bootstrap modal.But I can't able to get the values of form on controller side with scope variable.

https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview

My original code has another problem also. when I click on submit button it will refresh the whole page and submit function is not executing.

My form:

<div class="modal-body">
                    <form class="form-horizontal" name="contact" ng-submit="contactForm()">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Name* :</label>
                            <div class="col-lg-8">
                                <input class="form-control" type="text" id="name" name="_name" ng-model="_name" > </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Email* :</label>
                            <div class="col-lg-8">
                                <input class="form-control" type="email" id="email" name="_email" ng-model="_email" required> </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Mobile* :</label>
                            <div class="col-lg-8 row">
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"> </div>
                                <div class="col-lg-8">
                                    <input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Message :</label>
                            <div class="col-lg-8">
                                <textarea class="form-control" rows="2" name="_condition" ng-model="_condition"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-7 col-lg-5">
                        <button type="submit" class="btn btn-primary" id="contactSubmit" >Submit</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div></div>    
                    </form>
                </div>

Controller:

$scope.contactForm = function(){
console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
};

Get rid of bootstrap.js and use angular-ui bootstrap. No need to re-invent the wheel. Also it has no jQuery dependency so might as well get rid of that too...are you writing an angular app or a jQuery app? See [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Nov 14 '16 at 07:50
Writing an angular app, but for some jquery functionality like this $('#myModal').modal('hide'); I inculded Jquery — Harsh sachdev, Nov 14 '16 at 07:56
Ok, So can you please provide a sample code or edit my plnkr to explain the working of angular-ui bootstrap in my case. — Harsh sachdev, Nov 14 '16 at 08:07

Sunil Lama · Accepted Answer · 2016-11-14T08:30:42.907

You are opening the modal using plain jQuery approach which is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.

Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service and inject the $http service to have your data posted.

Here is the working plunker using angular-ui bootstrap.

PLUNKER:https://plnkr.co/edit/rjtHJl0udyE0PTMQJn6p?p=preview

<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <form ng-submit="submit()">
          <div class="modal-body">
            <label>Email address:</label>
            <input type="email" ng-model="user.email" />
            <label>Password</label>
            <input type="password" ng-model="user.password" />
          </div>
          <div class="modal-footer">
              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
              <input type="submit" class="btn primary-btn" value="Submit" />
          </div>
        </form>
    </script>

    <button class="btn" ng-click="open()">Open Modal</button>
</div>
  </body>
</html>

JS:

 angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$http) {
    $scope.user = {
        email: '',
        password: null,
    };

    $scope.open = function () {
        $modal.open({
            templateUrl: 'myModalContent.html', // loads the template
            backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
            windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
            controller: function ($scope, $modalInstance, $log, user) {
                $scope.user = user;
                $scope.submit = function () {
                    $log.log('Submiting user info.'); // kinda console logs this statement
                    $log.log(user);
                    $http({
                    method: 'POST', 
                    url: 'https://mytesturl.com/apihit',
                    headers: {
                        "Content-type": undefined
                    }
                    , data: user
                }).then(function (response) {
                    console.log(response);
                   $modalInstance.dismiss('cancel'); 
                }, function (response) {
                    console.log('i am in error');
                   $modalInstance.dismiss('cancel'); 
                    });
                    //$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
                }
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel'); 
                };
            },
            resolve: {
                user: function () {
                    return $scope.user;
                }
            }
        });//end of modal.open
    }; // end of scope.open function
};

yes I am working on it. What if I want to open this modal popup automatically after specific time like 5 seconds instead of button click. — Harsh sachdev, Nov 16 '16 at 11:31
@Harshsachdev, do i need to write the code for that as well, that would be really low level. :/ — Sunil Lama, Nov 17 '16 at 02:34
No thanks @Alex. I got it .Thank you very much for your answer — Harsh sachdev, Nov 17 '16 at 06:13

angularjs form inside bootstrap modal popup

1 Answers1