CODEWITHSUNDEEP
javascriptangularjsforms
Naresh
Naresh

Reputation: 39

Model window form doesn't reset the values of "$pristine" while destroy

I am designing a angularjs form in Model window, I have set validations of this like $pristine for detecting the changes of form. My problem is: If I make any change in the form field and destroy the model window form. When I open it again, then the previous changes are shown, like "$pristine" values are not set default. I search more about it on Google but no any solution.

Some part of my code is:

<div id="new-contact" class="modal" tabindex="-1" style="z-index: 9999;">
<div class="modal-dialog" style="width: 80%;">
    <form data-editable-form="editable-form" name="contactForm" autocomplete="off" id='contactForm' role='data-editable-form' method="post" novalidate>
        <fieldset>

            <div class=" col-xs-12" ng-class="{'has-error' : contactForm.contacts_type.$invalid && !contactForm.contacts_type.$pristine }">
                <label for="form-field-select-1" style="width: 250px;">
                    <msg key="contacttype" />
                </label>
                <label>
                    <select class="form-control" name="contacts_type" style="border-color: #d5d5d5 !important;" id="form-field-select-tag-type" required data-ng-model="contactContent.type">
                        <option value="" style="display: none;">{{'selectcontacttype'|localize}}</option>
                        <option value="BC">{{'businesscontact'|localize}}</option>
                        <option value="PC">{{'personalcontact'|localize}}</option>
                    </select>
                </label>
            </div>
        </fieldset>
    </form>
</div>

I use Show/Hide this window:

$("#new-contact").modal('show');
$("#new-contact").modal('hide');

I am also trying to use of $route. reload (); with the hide on their controller, but no any success.

Anyone please Help me how can do this..

Upvotes: 0

Views: 117

Answers (2)

Shehary
Shehary

Reputation: 9992

Did you try with hidden.bs.modal event

<script>
$(document).ready(function() {
    $('#new-contact').on('hidden.bs.modal', function () {
          $(':input','#contactForm').val("");
    });
});
</script>

Upvotes: 0

Ewald
Ewald

Reputation: 5751

Remember to also reset the FORM (contactform).

$('#contactForm').trigger('reset');

It's where the data is actually coming from.

Upvotes: 0

Related Questions