Reset form fields outside a controller in AngularJs

Question

I am having problem with resetting signup modal form fields.

For example, I have called a custom resetForm function when the user click modal close button and after getting $http request.

$scope.resetForm = function () {
            $scope.successMessage = "";
            $scope.message = "";

            $scope.FPEmail = "";
            $scope.forgotForm.$setPristine();
        };

But the bootstrap modals have property of getting close by clicking outside the modal body. In this case, I am not able to resetForm. I have tried to resolve it by putting ng-click on the button by which I am opening the modal. But this button is situated outside the controller and I don't know how to reset the form from outside the controller.

if you want that modal should nt be closed after clicking outside then add this data-backdrop="static" to div class="modal fade " data-backdrop="static"> — Anita
– Anita, Commented Apr 7, 2015 at 6:36
there are two ways to close it. 1) by clicking on close button (X) and 2) by clicking outside the modal — Farjad Hasan
– Farjad Hasan, Commented Apr 7, 2015 at 6:39
@NuttyProgrammer Reset all fields when you are opening modal because there are several exit points as you mentioned but It has only one entry point. — Satyam Koyani
– Satyam Koyani, Commented Apr 7, 2015 at 6:42

dfsq · Accepted Answer · 2015-04-07 06:42:43Z

1

Angular BootstrapUI $modal service call returns an object with property result which is "a promise that is resolved when a modal is closed and rejected when a modal is dismissed". Closing modal by clicking outside of the popup is considered rejection of this promise. It means that in your case you need to call resetForm in reject callback of the promise. For example:

$modal.open({
    template: 'form.html',
    controller: 'formController'
})
.result.then(function() {
    alert('resolved')
}, function() {
    $scope.resetForm();
});

answered Apr 7, 2015 at 6:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:07:22Z

1

To use scope in this instance, you'll need the buttons ng-click within the ng-controller that it relates to. The alternative is using JavaScript if you cant do this.

Have a look at a question I asked yesterday :) it may be helpful if you're using angular-UI

AngularJS $modalInstance - Can i do this in one controller?

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Apr 7, 2015 at 6:37

NewZeroRiot

5521 gold badge5 silver badges22 bronze badges

Comments

Sanjay B · Accepted Answer · 2015-04-07 06:49:37Z

0

you can use little code of jQuery in controller

$('#id').val(' ')

Worked for Me..

answered Apr 7, 2015 at 6:49

Sanjay B

2111 gold badge4 silver badges12 bronze badges

3 Comments

NewZeroRiot Over a year ago

I agree with augmenting AngularJS with JQuery but only when absolutely necessary. What about if there were 20 fields in the form? Likely, letting model binding work its magic is mostly preferable.

Farjad Hasan Over a year ago

Yep, I will prefer to use angularjs binding. using jquery or js will be my last resort.

Sanjay B Over a year ago

Actually you can't,you cannot access scope variable outside the controller. or you can reassign the same controller for button you are using to open modal

Collectives™ on Stack Overflow

Reset form fields outside a controller in AngularJs

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related