Angular 1.2：是否可以排除表单脏检查中的输入？ [英] Angular 1.2: Is it possible to exclude an input on form dirty checking?

问题描述

在下面的示例中，是否可以忽略下拉列表的脏状态？现在，如果用户更改选定的人员，它会变得很脏。但我不在乎这个字段在我的表单验证中是否脏。

; $ scope.persons = [{name：'Alice'}，{name：'Bob'}]; $ scope.selectedPerson = $ scope.persons [0]; $ scope.checkForm = function（）{if（$ scope.personForm。$ dirty）{alert（'Form is dirty'）; }其他{alert（'表单很干净'）; }}}

< script src =https：/ /aa.asp < div ng-controller =TestingCtrl> < form name =personFormnovalidate>公司：< input type =textng-model =companyrequired> < br>人员：< select ng-options =p中人物的p.nameng-model =selectedPerson>< / select> < /形式> <峰; br> < button ng-click =checkForm（）>检查是否脏< / button> < / div>< / div>

解决方案

我不知道你的表单中是否有其他输入元素。但在你的情况下，你可以明确地检查公司输入是否脏：
$ b

函数TestingCtrl（$ scope）{$ scope.company =''> ; $ scope.persons = [{name：'Alice'}，{name：'Bob'}]; $ scope.selectedPerson = $ scope.persons [0]; $ scope.checkForm = function（）{var isDirty = false; angular.forEach（$ scope.personForm，function（value，key）{//输入元素if（value.hasOwnProperty（'$ modelValue'）&& amp;& amp;& amp; value）$ name！='person'）{isDirty = isDirty | | value。$ dirty;}}）;如果（isDirty）{alert（'表格很脏'）; }其他{alert（'表单很干净'）; }}}

< script src =https：/ /aa.asp < div ng-controller =TestingCtrl> < form name =personFormnovalidate>公司：< input name =companytype =textng-model =companyrequired> < br>人员：< select name =personng-options =p.in个人中的p.nameng-model =selectedPerson>< / select> < /形式> <峰; br> < button ng-click =checkForm（）>检查是否脏< / button> < / div>< / div>

更新
我已经更新了我的解决方案，现在您可以排除特定的输入字段。然而，每个输入字段必须设置属性名称

更新II

一个更简洁的解决方案是使用一个指令，如果设置了特定输入的值，则该指令可以防止设置形式的状态变脏。这里有一个例子：

js lang-js prettyprint-override < return {restrict：'A'，require：'ngModel'，link：function（scope，elm，attrs，ctrl）{ctrl。$ pristine = false;}}}]）;

< script src =https://ajax.googleapis.com/ajax/libs/angularjs/ 1.2.23 / angular.min.js>< / script>< div ng-app =myApp> < form name =test>注意脏：< input ng-model =name/>< br />忽略脏：< select ng-model =genderignore-dirty> <选项>雄< /选项> <选项>雌性< /选项> < / select>< br />脏：{{test。$ dirty}}< / form>< / div>

In the example beneath, is it possible to ignore the dirty state of the dropdown list? Now it get's dirty if the user changes the selected person. But I don't care if this field is dirty in my form validation.

function TestingCtrl($scope) {
  $scope.company = '';
  $scope.persons = [{
    name: 'Alice'
  }, {
    name: 'Bob'
  }];


  $scope.selectedPerson = $scope.persons[0];

  $scope.checkForm = function() {
    if ($scope.personForm.$dirty) {
      alert('Form is dirty');
    } else {
      alert('Form is clean');
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>


<div ng-app>

  <div ng-controller="TestingCtrl">

    <form name="personForm" novalidate>
      Company:
      <input type="text" ng-model="company" required>
      <br>Persons:
      <select ng-options="p.name for p in persons" ng-model="selectedPerson"></select>

    </form>

    <br>
    <button ng-click="checkForm()">Check if dirty</button>

  </div>

</div>

解决方案

I don't know if you have any other input elements in your form. But in your case you could explicitely check if the company input is dirty:

function TestingCtrl($scope) {
  $scope.company = '';
  $scope.persons = [{
    name: 'Alice'
  }, {
    name: 'Bob'
  }];


  $scope.selectedPerson = $scope.persons[0];

  $scope.checkForm = function() {
    var isDirty = false;

    angular.forEach($scope.personForm, function (value, key) {
        // Input element
        if (value.hasOwnProperty('$modelValue') && value.$name!='person') {
            isDirty = isDirty || value.$dirty;
        }
    });
    if (isDirty ) {
      alert('Form is dirty');
    } else {
      alert('Form is clean');
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>


<div ng-app>

  <div ng-controller="TestingCtrl">

    <form name="personForm" novalidate>
      Company:
      <input name="company" type="text" ng-model="company" required>
      <br>Persons:
      <select name="person" ng-options="p.name for p in persons" ng-model="selectedPerson"></select>

    </form>

    <br>
    <button ng-click="checkForm()">Check if dirty</button>

  </div>

</div>

UPDATE I have updated my solution, now you can exclude specific input fields. However each input field has to have the attribute name set

UPDATE II

A much cleaner solution would be to use a directive which prevents the form of settings the state to dirty if the value of a specific input is set. Here you have an example:

angular.module('myApp', []).directive('ignoreDirty', [function() {
    return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$pristine = false;
    }
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <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>

这篇关于Angular 1.2：是否可以排除表单脏检查中的输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！