当我在Angularjs中单击模式弹出关闭按钮(x)时重置表单 [英] Reset form when i click modal pop up close button (x) in Angularjs

问题描述

我在模式弹出窗口中有表单.我正在使用打开模式弹出窗口的指令

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
  };
});

如果我在模式弹出窗口中单击取消"按钮，则使用$ setpristine重置表单，但如果在单击关闭"按钮(x)时出现任何验证错误，它将调用hideModal()函数，从而使模式窗口关闭，但是如果我重新打开模式弹出窗口验证错误仍然存​​在于模式弹出窗口中.如何重置该表单.在这里，我的工作Plnkr https://plnkr.co/edit/embFJFmautH3uRbHOWU7?p=preview

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

推荐答案

我认为您在这里错过了几件事.我为此创建了一个punkr，这很容易解释.您可以查看它，然后观察它确实是您所需要的.模态内部的窗体在打开时会进入其初始状态，并且在此工作的插件中代码井井有条.当您打开模态时，表格也被重置.

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>"
    };
});

这是一个工作正常的plunkr PLUNKR

Here is a working plunkr PLUNKR

这篇关于当我在Angularjs中单击模式弹出关闭按钮(x)时重置表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！