how to reset all HTML input fields after closing angular modal

Question

I will enter username and password in text field but I will not save. Without saving that data i will close the popup modal.

When I click outside of the modal, it will close.

If I open the popup again, the previous datas are still appearing. I need to clear those datas and want to make the field as empty.

Please check the following link. Plunkr

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.user = {
        user: 'name',
        password: null,
        notes: 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); 
                    $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
};

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.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>User name</label>
            <input type="text" ng-model="user.user" />
            <label>Password</label>
            <input type="password" ng-model="user.password" />
            <label>Add some notes</label>
            <textarea rows="4" cols="50" ng-model="user.notes">

</textarea>
          </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 me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

assign the values to an empty string when you open the modal — Laazo
– Laazo, Commented Jul 21, 2017 at 13:43
I tried. Some Dropdowns are there. I made it Empty array and text fileds are empty string. But it is not working. — sathish kumar
– sathish kumar, Commented Jul 21, 2017 at 13:53

voskhod · Accepted Answer · 2017-07-21 13:45:42Z

2

The problem is, you are actually binding the $scope.user in modal to the $scope.user from the ModalDemoCtrl. To solve this, you should make a copy of your user before using it in the modal controller:

$modal.open({
     ...
     controller: function ($scope, $modalInstance, $log, user) {
         $scope.user = angular.copy(user);
         ...
     }
});

See Angular.copy() documentation.

answered Jul 21, 2017 at 13:45

voskhod

19412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jshedrof · Accepted Answer · 2017-07-21 14:02:35Z

0

see Clear the form after submit angularjs for how to clear the form. you can trigger this in your submit function before the modal closes.

answered Jul 21, 2017 at 14:02

jshedrof

193 bronze badges

Comments

Burdy · Accepted Answer · 2017-07-21 14:35:27Z

You can do that with ui bootstrap promise:

$scope.modal.result.then(function(result) {
    console.log('client: resolved: ' + result);
  }, function(reason) {
    console.log('client: rejected: ' + reason);
});

I had run your code and it worked fine.

angular.module('plunker', ['ui.bootstrap']);
    var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.user = {
        user: 'name',
        password: null,
        notes: null
    };

    $scope.open = function () {

        var $theModal = $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); 
                    $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

        $theModal.result.then(function(result) {
            console.log('client: resolved: ' + result);
        }, function(reason) {
            $scope.user = {}
            console.log('client: reject: ' + reason);
        })
    }; // end of scope.open function
};

Collectives™ on Stack Overflow

how to reset all HTML input fields after closing angular modal

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related