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 stackoverflow.com/a/21571392/6804648 — Ushma Joshi
– Ushma Joshi, Commented Jun 16, 2017 at 9: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
– vivek, Commented Jun 16, 2017 at 9:59
Can you provide a working plunkr as plnkr.co/edit/bvBMx5Da5jBogayx1K1E?p=preview is not working — Ankit Agarwal
– Ankit Agarwal, Commented Jun 26, 2017 at 10:45
plnkr.co/edit/hogjXxJSPkehGshKrWuq?p=preview try this plunker — Thiyagu
– Thiyagu, Commented Jun 27, 2017 at 10:22

Ankit Agarwal · Accepted Answer · 2017-06-27 10:03:18Z

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, 2017 at 10:03

answered Jun 26, 2017 at 11:32

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

11 Comments

vivek Over a year ago

hi AKA ,Thank you for responding this issue.Here my working plnkr plnkr.co/edit/embFJFmautH3uRbHOWU7?p=preview

Ankit Agarwal Over a year ago

Click on first name then click on last name, close the modal, open it again. You will find the difference.

Ankit Agarwal Over a year ago

It is working there as well. I can see that working.

Ankit Agarwal Over a year ago

Please upvote the answer if it is really helpful to you.

vivek Over a year ago

sure @AKA No words to explain about you...You are really great man thank you so much for your help

|

Collectives™ on Stack Overflow

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

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related