Reset form when i click modal pop up close button (x) in Angularjs

Question

I have form in modal pop up.i am using directives for opening the modal pop up

mymodule.directive('modalDialogSite', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with the template below
    transclude: true, // we want to insert custom content inside the directive
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
        if (attrs.overflow)
        scope.dialogStyle.overflow = attrs.overflow;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><i class='fa fa-times-circle'></i></div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"// See below
  };
});

If i click cancel button in modal popup i use $setpristine to reset the form but If have any validation error when i click close button (x) it calls hideModal() function so modal get closed but if i reopen the modal pop the validation error still exists in modal popup.How can i reset that form.Here My working Plnkr https://plnkr.co/edit/embFJFmautH3uRbHOWU7?p=preview

use $scope.formName.$setPristine(); refer this https://stackoverflow.com/a/21571392/6804648 — Ushma Joshi, Jun 16 '17 at 09:35
@ Ushma Joshi Thanks for your response but i have already done reset when clicking cancel button like you said but when i click close button (x) in modal pop i am not able to pass the form name.Is there any solution? — vivek, Jun 16 '17 at 09:59
I have a button when i click it calls controller Add Site load->view('site/modal/add_site');?> in my controller mymodule.controller('myCrtl',function($scope){ $scope.modalShown_add = false; $scope.add_site = function(){ $scope.modalShown_add = true; } }); — vivek, Jun 16 '17 at 10:20
if you want plnkr just go to https://plnkr.co/edit/bvBMx5Da5jBogayx1K1E?p=preview but it will not work you can see only coding — vivek, Jun 16 '17 at 10:26
Can you provide a working plunkr as https://plnkr.co/edit/bvBMx5Da5jBogayx1K1E?p=preview is not working — Ankit Agarwal, Jun 26 '17 at 10:45
https://plnkr.co/edit/hogjXxJSPkehGshKrWuq?p=preview try this plunker — Thiyagu, Jun 27 '17 at 10:22

Ankit Agarwal · Accepted Answer · 2017-06-27T10:03:18.120

0

I think you have missed several things here. I have created a plunkr for this and it very much self explanatory. You can go over to it and observe that it is exactly what you need. The form inside the modal gets to its initial state when it is opened and the code is well organized in this working plunkr. Also the form is reset when you open the modal.

app.directive('modalDialogAdd', function() {

    return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
        scope.dialogStyle = {};
        scope.text ={
        first_name : '',
        last_name: ''
      };

        if (attrs.width)
            scope.dialogStyle.width = attrs.width;
        if (attrs.height)
            scope.dialogStyle.height = attrs.height;
        if (attrs.overflow)
            scope.dialogStyle.overflow = attrs.overflow;
        scope.hideModal = function() {
              scope.show = false;
        };
           scope.$watch('show', function (newVal, oldVal) {
              if(newVal){
                  var childFormController = element.find('form').eq(0).controller('form');
                  childFormController.$setPristine();
                  childFormController.$setUntouched();
              }
          });

    },
        template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><i class='fa fa-times-circle'></i></div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
    };
});

Here is a working plunkr PLUNKR

edited Jun 27 '17 at 10:03

answered Jun 26 '17 at 11:32

Ankit Agarwal

30,378
5
37
62

hi AKA ,Thank you for responding this issue.Here my working plnkr https://plnkr.co/edit/embFJFmautH3uRbHOWU7?p=preview – vivek Jun 27 '17 at 08:40
Actually my logic is totally different from your code just check this plunker – vivek Jun 27 '17 at 09:53
just check my plunker.The scenario will be different from what you did.could you please try my code? – vivek Jun 27 '17 at 10:02
1

Click on first name then click on last name, close the modal, open it again. You will find the difference. – Ankit Agarwal Jun 27 '17 at 10:05
yup its working fine when i click cancel button but instead of cancel button if i click (x) symbol in modal head it is not working – vivek Jun 27 '17 at 10:08
in my code i gave (x) symbol in template within directive.Is there any solution to reset the form when i click (x) symbol which is from directive template? – vivek Jun 27 '17 at 10:09
1

It is working there as well. I can see that working. – Ankit Agarwal Jun 27 '17 at 10:10
but in your plunker once i click (x) symbol close modal pop up,again i am not able to open the modal again – vivek Jun 27 '17 at 10:12
1

Please upvote the answer if it is really helpful to you. – Ankit Agarwal Jun 27 '17 at 10:35
1

sure @AKA No words to explain about you...You are really great man thank you so much for your help – vivek Jun 27 '17 at 10:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147709/discussion-between-user7098427-and-aka). – vivek Jun 27 '17 at 10:56

Reset form when i click modal pop up close button (x) in Angularjs

1 Answers1

Linked