i am new at angularJS, i want to check my page is dirty or not. i know how to check dirty form but not whole page(like i am using directive in this form).is there any way to check directive part is dirty or not? like in my page i have directive for star rating. in that if i change rating then i want to check the page is dirty or not?
<form name="reviewForm">
<div class="row">
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div>
<table class="rwd-table table-responsive table-bordered table-striped" >
<tbody>
<tr data-ng-repeat="review in reviewModifyData.review.KeyAreaList" >
<td class="mywidth">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<strong class="reviewPadding">
<span data-ng-bind="review.Title"></span>
</strong>
<br>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<small class="reviewPadding"><span data-ng-bind="review.HelpText | limitTo:150"></span><span tooltip-placement="auto" uib-tooltip="{{review.HelpText}}" data-ng-show="review.HelpText.length > 150">...</span></small>
</div>
</td>
<td >
<span class="visible-sm visible-xs"> </span>
<angular-star-rating min="reviewModifyData.minValue" max="reviewModifyData.review.RatingLevel"
value='review.Rate' hover='reviewModifyData.changeOnHover'
is-readonly='reviewModifyData.isReadonly'>
</angular-star-rating>
</td>
</tr>
</tbody>
</table>
<br>
<div class="row" data-ng-if="reviewModifyData.section.length !== 0" data-ng-class="{'has-error': reviewForm.$submitted && reviewForm.Remark.$invalid,'has-feedback': reviewForm.$submitted && reviewForm.Remark.$valid}">
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label" > Remark</label> <span data-ng-if="reviewModifyData.review.IsRemarkMandetory" class="errortext">*</span>
<div class="has-feedback">
<textarea class="form-control noresize" data-ng-if="!reviewModifyData.review.IsRemarkMandetory" rows="3" name="Remark" placeholder="Enter Remark" data-ng-model='reviewModifyData.review.Remark' ></textarea>
<textarea class="form-control noresize" required data-ng-if="reviewModifyData.review.IsRemarkMandetory" rows="3" name="Remark" placeholder="Enter Remark" data-ng-model='reviewModifyData.review.Remark' ></textarea>
</div>
<span class="text-danger" data-ng-show="reviewForm.$submitted && reviewForm.Remark.$error.required">Please Enter Remark <i class="fa fa-exclamation-circle"></i></span>
</div>
</div>
</div>
</div>
</div>
</form>
now i have tried in my js like this.
if ($scope.reviewForm.$dirty) {
toastr.error('The form is dirty, do you want to stay on the page?');
return;
}
Thanks in advance,
if you want to see if the form is dirty you should check the viewModel in kendo way sample. basically I've created a viewModel which is impements the ObservableObject interface and has a two way binding with the form's container.
Dirty Means If user change any data or check any box or select any value from drop down and he forget to save the data and click on exit button or closing the browser then if you want to show the message to user, before cancel or exit please save the data. Here is the code.
Dirty is a term used to flag if data or state has changed. Many frameworks that do form input/edit have a . dirty property you can check to see if you should bother saving changes or send an alert to the user to see if they want to save changes. 1 Like. justin March 8, 2021, 2:08pm #4.
multiple) c = (def != skills. selectedIndex); if (c) alert("#skills has changed"); That's how you check whether any form element has changed.
you can access formController in your directive (look at this answer) than use $setDirty() method
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With