AngularJS -从表单验证/脏中排除字段

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

我在HTML5表单中有一个复选框，我想排除它，这样它就不会改变我的表单$state($ pure或$dirty)。

I have tried using ignoreDirty directive - Angular 1.2: Is it possible to exclude an input on form dirty checking?

我尝试过使用ignoreDirty指令——角度1.2:是否有可能排除表单脏检查的输入?

and some other solutions and none work for ng-form inside HTML5 form, some example code:

还有一些其他的解决方案，没有一个可以在HTML5表单中使用，一些示例代码:

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

1 个解决方案

#1

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.

您提供的ignoreDirty指令可以正常工作，就像这个演示小提琴。下面的代码示例取自angular-1-2-is- possible-to- exclusive -an-input-on-form-dirty检查。还要避免使用不符合HTML的嵌套表单。表单元素不能有元素表单。它会引起问题和错误，例如你目前所面临的问题。

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;
    }
  }
}]);