How to clear a featherlight modal

Question

I am using feather-light modal in my page. on the modal one form is there with certain input fields. Once I fill in the fields and close the modal and when I open it again , it contains the previously filled data. I want to clear the data once it is closed. I am using angular js in my page. Can anyone tell me how can I clear the feather-light modal using angular js?

Update-

In my code I have to open another modal after closing the first modal. And once second modal closes, if I am opening my first modal, its showing the previously filled data, I want to reset the modal data of first modal. in my html I am using below code-

<button type="submit" ng-click="anotherModal(myForm)"   ng-class="{ 'featherlight-close' : myForm.$valid}">Submit</button>

and in script I am using below code-

 $scope.anotherModal= function (myForm) {

    if ($scope.myForm.$valid) {
    $scope.myForm.$submitted = true;
  $.featherlight("#f12","open");

    }
   }

Can anyone tell me where should I add to reset the first modal?

Updated Plunker-

Please find my plunker here- https://plnkr.co/edit/cDP1eqtUsKkeMaUiCIoM?p=preview

I am using persist ='shared' in my code because if I remove this then form validation won't work on first modal.

My issue is that when I open my second modal next time,it contains previously filled values and from there when I click on submit button my second modal doesn't show up. Can anyone help me in solving my issue?

Answer 1

If you are using the persist option, then yeah, the form is persisted, so you'll have to clear it yourself.

If not, then you'll get a new copied form each time. In that case though, you'll have to be careful about how you bind it and avoid using any IDs, since those are supposed to be unique.

Answer 2

As far as I know featherlight is gallery plugin, used for displaying images in a lightbox. Considering this it is not meant to be used like that (even though you can, but it will not behave as you expect here out of the box), so that's why you'll have to cleanup behind you (or more specific your users), and on popup close action, clear all form fields. There are several ways to do that, eg. form reset button (input type="reset"), js callback on close popup or submit event (or in your case using angular js events), etc..

Since you didn't provide any code that's all I can tell you for now..

Also possible duplicate of Resetting form after submit in Angularjs

UPDATE

Not sure what exactly are you trying to achive here, but if you remove (or move inside showAnotherModal function) $.featherlight.defaults.persist=true; line, it works as you described, first popup is cleared when you open it for second time. Here is your snippet updated:

var app = angular.module('myApp', ['ngMessages']);

app.controller('myCtrl', function($scope) {
//  $.featherlight.defaults.persist="shared";
  $scope.showAnotherModal = function () {
  $.featherlight.defaults.persist="shared";
  if ($scope.myForm.$valid) {
    $scope.myForm.$submitted = true;
    $scope.myForm.dirty = false;

    $scope.myForm.$setPristine();
    $scope.myForm.$setUntouched();

    $.featherlight("#fl3",'open');
  }
}

});