Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - exclude field from form validation / dirty

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>
like image 708
Itsik Mauyhas Avatar asked Mar 23 '17 09:03

Itsik Mauyhas


People also ask

What is setPristine()?

$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.

What is pristine and dirty in angular?

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.

What is form controller?

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.

What is valid in Angular?

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.


1 Answers

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.

View

<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>

AngularJS application

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;
    }
  }
}]);
like image 177
lin Avatar answered Oct 22 '22 22:10

lin