Angular 1.2: Ist es möglich, eine Eingabe bei der Prüfung auf Formulardreck auszuschließen?

Question

Im folgenden Beispiel ist es möglich, den schmutzigen Zustand der Dropdown-Liste zu ignorieren? Jetzt wird es schmutzig, wenn der Benutzer die ausgewählte Person ändert. Aber es ist mir egal, ob dieses Feld in meiner Formularvalidierung schmutzig ist.

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>

Answer 1

Ich weiß nicht, wenn Sie andere Eingabeelemente in Ihrem Formular haben. Aber in Ihrem Fall könnten Sie explizit überprüfen, ob das Unternehmen Eingang verschmutzt:

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 ich meine Lösung aktualisiert haben, jetzt können Sie bestimmte Eingabefelder ausschließen. Jedoch jedes Eingabefeld muss den Attributname

UPDATE II

Ein viel sauberere Lösung gesetzt haben würde, eine Richtlinie zu verwenden, die die Form von Einstellungen, um den Zustand zu schmutzig verhindert, wenn der Wert eines bestimmten Eingangs ist eingestellt. Hier haben Sie ein Beispiel:

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>

Answer 2

boindiil der Richtlinie basierte Lösung funktioniert, aber hat einen Fehler: es nicht mehr funktioniert, wenn Form des $setPritine manuell ausgeführt wird. Dies kann durch Hinzufügen einer zusätzlichen Leitung gelöst werden, die die Methode Verhalten für die Eingabe tilgt:

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