单击取消按钮或编辑图标时，如何删除（删除）现有angularjs表单中未保存的更改

Question

1. the scenario is that there are multiple forms in the page and

2. when a user fills in the input fields in one of the form and doesn't save them, those changes should be deleted as soon as they close the current form by the cancel button on the close icon.

3. if there is any previous data in the input fields that data should be unaltered and if there is any additional data written to it and not saved should be deleted

HTML:

 <md-content class="md-padding no-margin">
    <div>
        <form name="formone" novalidate ng-submit="saveData(profile)">
            <div id="basicDetails">
                <div layout="row" layout-align="space- center">
                    <p class="uc-heading">Basic Details</p>
                    <i ng-if="!condition" class="fa-times fa" aria-hidden="true" ng-click="toggleEditPanel('details')"></i>
                </div>
                <div >
                    <label>First name</label>
                    <input ng-model="profile.details" name="details" ng-required="true" />
                    <label>Last name</label>
                    <input ng-model="profile.details.data.data" name="details[[data]]" ng-required="true" />
                </div>
                <div flex layout="row" layout-align="end center">
                    <md-button ng-if="!condition" class="md-raised md-custom-button" ng-click="toggleEditPanel('details')">Cancel</md-button>
                    <md-button type="submit" ng-disabled="profileForm.$invalid" class="md-raised md-custom-button" ></md-button>
                </div>
            </div>
        </form>
    </div>
</md-content>

Answer 1

You need to add two things to your controller:

1. On init, save the current value of profile.details and profile.details.data.data .
2. Adde a method resotreData() to your controller where you reassing the saved values to profile.details and profile.details.data.data .

And then add resotreData() to the ng-click event of your cancel button.