7

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>
Community
  • 1
  • 1
Itsik Mauyhas
  • 3,824
  • 14
  • 69
  • 114

1 Answers1

9

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;
    }
  }
}]);
lin
  • 17,956
  • 4
  • 59
  • 83
  • the input is inside ng-form. – Itsik Mauyhas Mar 23 '17 at 09:57
  • Yea right and it doesnt change your `$dirty` state. – lin Mar 23 '17 at 09:58
  • Of which form? let me try your fiddle, it still changes the state of the outter form. – Itsik Mauyhas Mar 23 '17 at 10:00
  • Well m8, element `form` can't have a child element `form`. Just remove it because its not HTML conform. – lin Mar 23 '17 at 10:04
  • http://stackoverflow.com/questions/32210696/angular-submit-form-inside-form – Itsik Mauyhas Mar 23 '17 at 10:07
  • Not sure why, I use ng-form inside forms all the time. – Itsik Mauyhas Mar 23 '17 at 10:08
  • Nested forms are not allowed by HTML markup and it comes with a lot of problems (e.g. this one you are facing now). I'm creating web application for years now and I never ever need to use nested forms. Why do you need a nested form? – lin Mar 23 '17 at 10:11
  • I agree, like this issue it can cause a lot of problems, I need it because some bussiness logic I need ti implement. – Itsik Mauyhas Mar 23 '17 at 10:12
  • `some bussiness logic` isnt an explanation for me. Why do you need it? – lin Mar 23 '17 at 10:13
  • There is diffrent logic for the ouuter form and I need to know which form is valid, dirty and still be able to submmit it. if one ng-form is unvalid I still want to be able to subbmit the rest and the ouuter one. – Itsik Mauyhas Mar 23 '17 at 10:17
  • @ItsikMauyhas You don't need an parent form to check if all or some form on your page are valid/dirty/send or what ever. You also can send all forms at once with an custom function. In that way you avoid all the problems you have now. Keep it simple. – lin Mar 23 '17 at 10:20
  • Well you are right, I just hope for a cleaner solution then using a singal form, thank. – Itsik Mauyhas Mar 23 '17 at 10:25
  • @ItsikMauyhas glad to help ya. Cheers m8 – lin Mar 23 '17 at 10:26