Solution sans solution de contournement
Je suis venu avec une solution qui utilise AngularJS, sans aucune solution de contournement. L'astuce ici est d'utiliser AngularJS possibilité d'avoir plus d'une directive portant le même nom.
Comme d'autres l'ont mentionné, il est en fait un pull request (https://github.com/angular/angular.js/pull/1127) qui l'a fait dans le AngularJS 1.1.x branche qui permet à des formes d'être réinitialisé. La validation de cette demande de pull modifie la ngModel et la forme/ngForm directives (j'aurais bien aimé ajouter un lien, mais Stackoverflow ne veut pas de moi d'ajouter plus de deux liens).
Nous pouvons maintenant définir notre propre ngModel et la forme/ngForm directives et d'étendre les fonctionnalités fournies dans la demande d'extraction.
J'ai enveloppé ces directives dans un AngularJS module nommé resettableForm. Tout ce que vous avez à faire est d'inclure ce module dans votre projet et votre AngularJS la version 1.0.x se comporte comme si elle était Angulaire 1.1.x version à cet égard.
"Une fois la mise à jour 1.1.x vous n'avez même pas à mettre à jour votre code, il suffit de retirer le module et vous avez terminé!"
Ce module passe tous les tests ajouté à la 1.1.x direction générale pour la forme fonctionnalité de réinitialisation.
Vous pouvez voir le module de travail dans un exemple dans un jsFiddle (http://jsfiddle.net/jupiter/7jwZR/1/) j'ai créé.
Étape 1: Inclure la resettableform module dans votre projet
(function(angular) {
// Copied from AngluarJS
function indexOf(array, obj) {
if (array.indexOf) return array.indexOf(obj);
for ( var i = 0; i < array.length; i++) {
if (obj === array[i]) return i;
}
return -1;
}
// Copied from AngularJS
function arrayRemove(array, value) {
var index = indexOf(array, value);
if (index >=0)
array.splice(index, 1);
return value;
}
// Copied from AngularJS
var PRISTINE_CLASS = 'ng-pristine';
var DIRTY_CLASS = 'ng-dirty';
var formDirectiveFactory = function(isNgForm) {
return function() {
var formDirective = {
restrict: 'E',
require: ['form'],
compile: function() {
return {
pre: function(scope, element, attrs, ctrls) {
var form = ctrls[0];
var $addControl = form.$addControl;
var $removeControl = form.$removeControl;
var controls = [];
form.$addControl = function(control) {
controls.push(control);
$addControl.apply(this, arguments);
}
form.$removeControl = function(control) {
arrayRemove(controls, control);
$removeControl.apply(this, arguments);
}
form.$setPristine = function() {
element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
form.$dirty = false;
form.$pristine = true;
angular.forEach(controls, function(control) {
control.$setPristine();
});
}
},
};
},
};
return isNgForm ? angular.extend(angular.copy(formDirective), {restrict: 'EAC'}) : formDirective;
};
}
var ngFormDirective = formDirectiveFactory(true);
var formDirective = formDirectiveFactory();
angular.module('resettableForm', []).
directive('ngForm', ngFormDirective).
directive('form', formDirective).
directive('ngModel', function() {
return {
require: ['ngModel'],
link: function(scope, element, attrs, ctrls) {
var control = ctrls[0];
control.$setPristine = function() {
this.$dirty = false;
this.$pristine = true;
element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
}
},
};
});
})(angular);
Étape 2: Fournir une méthode sur votre contrôleur qui réinitialise le modèle
S'il vous plaît être conscient que vous devez réinitialiser le modèle lorsque vous réinitialisez le formulaire. Dans votre contrôleur, vous pouvez écrire:
var myApp = angular.module('myApp', ['resettableForm']);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.form.$setPristine();
$scope.model = '';
};
}
Étape 3: Inclure cette méthode dans votre modèle HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="form">
<input name="requiredField" ng-model="model.requiredField" required/> (Required, but no other validators)
<p ng-show="form.requiredField.$errror.required">Field is required</p>
<button ng-click="reset()">Reset form</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
</div>
</dvi>
