Resetting Form When modalpop up gets closed if i click any place in my page

Question

I am using Angular 1.3.I have a form in modal Pop-up.After submitting the form my modal Pop-up form is reset and if i click cancel button my form also reset

    $scope.add_user =   function(add_form)
    {
        if(add_form.$valid)
        {
        $http({
           method:'POST',
           url:file_path,  
           headers:{'Content_Type':'appliaction/json'},
           data:$scope.text
        }).success(function(data){
           $scope.modalShown_add = ! $scope.modalShown_add; 
           $scope.modalShown_addsuccess = !$scope.modalShown_addsuccess; 
           $scope.getlist();
           add_form.reset();
        }).error(function(data){
            add_form.reset();
        })
    }
}

but when i have any validation error if i click any place of my page my modal Pop-up gets closed after i open the modal Pop-up i am not able to reset my form.Suppose if i pass form name in add function to reset the form i am getting error

 $scope.add  =function()
    {
       $scope.modalShown_add = ! $scope.modalShown_add; 
    }

Answer 1

Each form directive creates an instance of FormController so you can access it by setting the name property like name="$ctrl.addForm".

To clear the form you need to clear the model and then use form controller to control the validation state of your form (see resetForm method):

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
    var ctrl = this;
    
    ctrl.users = [];
    ctrl.showPopup = false;
    ctrl.openModal = openModal;
    ctrl.saveUser = saveUser;
    
    function openModal(user) {
      ctrl.showPopup = true;
      ctrl.user = angular.copy(user); // a copy of the user to disable 2-way binding with the list
      resetForm(ctrl.addForm);
    }
    
    function resetForm(form){
      form.$setPristine(); //set the form to its pristine state
      form.$setUntouched(); //set the form to its untouched state
    }
    
    function saveUser(user){
        //your saving logic here it is just a sample
        if (!user.id){
          user.id = ctrl.users.length;
          ctrl.users.push(user);
        } else {
          ctrl.users[user.id] = user;
        }
        
        //hide pop up
        ctrl.showPopup = false;
    }
    
    $scope.$ctrl = ctrl;
}])
.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, 
    transclude: true,
    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' 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>"// See below
  };
});

.ng-invalid.ng-touched {
  border: 1px solid red; 
}

.ng-modal{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.ng-modal-overlay{
  background-color: black;
  opacity: 0.3;
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.ng-modal-dialog {
  position: relative;
  top: 50%;
  z-index: 1;
  background-color: white;
  padding: 1em;
  border: 1px solid gray;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.3.20/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
       <!-- send en empty object to create a new user -->
      <button ng-click="$ctrl.openModal({})">Show</button>
      
      <div>
        <a href="javasctript: void(0);" ng-repeat-start="u in $ctrl.users" ng-click="$ctrl.openModal(u)">{{u.name}}</a><span ng-repeat-end ng-if="!$last">, </span>
      </div>
      
      <modal-dialog show="$ctrl.showPopup">
          <form name="$ctrl.addForm" ng-submit="$ctrl.saveUser($ctrl.user)">
             <input name="user_name" ng-model="$ctrl.user.name" type="text" ng-required="true"/>
             <div>
                <button type="submit">Save</button>
                <button type="button" ng-click="$ctrl.showPopup = false;">Cancel</button>
             </div>
          </form>
      </modal-dialog>
  
  </div>
</div>

Hope this helps you.