I have a checkbox
inside ng-form
rapped by HTML5 form
that I want to exclude so it won't change my form $state
($pristine
or $dirty
).
I have tried using ignoreDirty
directive - Angular 1.2: Is it possible to exclude an input on form dirty checking?
and some other solutions and none work for ng-form
inside HTML5 form
, some example code:
<form name="mainForm" class="col-xs-10 form-validation" novalidate>
<ng-form name="innerForm">
<div>
<span>check my
<span ng-if="vm.utils.mode!=='readonly'">
<input type="checkbox"
ng-model="vm.utils.amalotSecond"
class="secondYearCheckBox">
</span>
</span>
</div>
</ng-form>
<form>
$setPristine();Sets the form to its pristine state. This method sets the form's $pristine state to true, the $dirty state to false, removes the ng-dirty class and adds the ng-pristine class. Additionally, it sets the $submitted state to false. This method will also propagate to all the controls contained in this form.
The main difference between both of them is that ng-dirty is used to tell that the input field is modified by the user and the ng-pristine is used to tell us that the field is untouched by the user.
A form controller is triggered either upon the form's submission or on adding or updating input in a form field. When a user adds or updates an input value in a form field or clicks the submit or cancel button in the form, the form function associated with this function is triggered to execute the intended action.
valid – state of the validity of all form controls, true if all controls are valid. invalid – inverse of valid ; true if some control is invalid. pristine – gives a status about the “cleanness” of the form; true if no control was modified. dirty – inverse of pristine ; true if some control was modified.
The ignoreDirty
directive you provided works fine like in this demo fiddle. The following code example was taken from angular-1-2-is-it-possible-to-exclude-an-input-on-form-dirty-checking. Also try to avoid using nested forms which are not HTML conform. An form
element can't have an element form
. It will cause problems and errors e.g. the one you are currently facing.
<div ng-controller="MyCtrl">
<form name="test">
Watching dirty: <input ng-model="name" /><br />
Ignoring dirty: <select ng-model="gender" ignore-dirty>
<option>male</option>
<option>female</option>
</select><br />
dirty: {{test.$dirty}}
</form>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = 'Superhero';
});
myApp.directive('ignoreDirty', [function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$setPristine = function() {};
ctrl.$pristine = false;
}
}
}]);
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