将表单字段重置为原始状态（重置脏状态）的功能在AngularJS 1.1.x的路线图中。不幸的是，目前的稳定版本中缺少这样的功能。
将所有表单字段重置为AngularJS 1.0.x的初始原始状态的最佳方法是什么。
我想知道这是否可以通过指令或其他简单的解决方法来解决。我更喜欢解决方案，而无需触及原始的AngularJS源。为了澄清和证明这个问题，链接到JSFiddle。 http://jsfiddle.net/juurlink/FWGxG/7/
所需功能在路线图 - http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html上
功能请求 - https://github.com/angular/angular.js/issues/856
建议的解决方案提取请求 - https://github.com/angular/angular.js/pull/1127
足够好的解决方法？
我刚想通知我可以重新编译HTML部分并将其重新放入DOM中。它的工作原理很适合临时解决方案，但也可以在评论中提到@blesh：
控制器应仅用于业务逻辑，而不是DOM！
<div id="myform">
<form class="form-horizontal" name="form">
</form>
</div>
在resetForm()上的我的控制器中：
JavaScript：
var pristineFormTemplate = $('#myform').html();
$scope.resetForm = function () {
$('#myform').empty().append($compile(pristineFormTemplate)($scope));
}
答案 0 :(得分：85)
我认为值得一提的是，在Angular的更高版本（例如1.1.5）中，您可以在表单上调用$setPristine。
$scope.formName.$setPristine(true)
这会将所有表单控件设置为原始状态。
答案 1 :(得分：32)
我想出了一个使用AngularJS而没有任何解决方法的解决方案。这里的技巧是使用AngularJS能力使多个指令同名。
正如其他人提到的那样，实际上有一个拉取请求（https://github.com/angular/angular.js/pull/1127），它进入了AngularJS 1.1.x分支，允许重置表单。对此pull请求的提交会改变ngModel和form / ngForm指令（我本来希望添加一个链接，但Stackoverflow不希望我添加两个以上的链接）。
我们现在可以定义我们自己的ngModel和form / ngForm指令，并使用pull请求中提供的功能扩展它们。
我已将这些指令包装在名为resettableForm的AngularJS模块中。您所要做的就是将此模块包含在您的项目中，并且您的AngularJS版本1.0.x就像在这方面的Angular 1.1.x版本一样。
''更新到1.1.x后，您甚至不需要更新代码，只需删除模块即可完成！''
此模块还会传递添加到1.1.x分支的所有测试，以获取表单重置功能。</ p>
您可以在我创建的jsFiddle（http://jsfiddle.net/jupiter/7jwZR/1/）中看到该模块的示例。
(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);
请注意，重置表单时必须重置模型。在您的控制器中，您可以写：
var myApp = angular.module('myApp', ['resettableForm']);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.form.$setPristine();
$scope.model = '';
};
}
<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>
答案 2 :(得分：7)
编辑...我删除了我的旧答案，因为它不够。
我实际上只是遇到了这个问题，这是我的解决方案：我为角度做了一个扩展方法。我这样做是通过跟随$ scope.form。$ setValidity（）做了一些事情（反向）......
<强> Here's a plnkr demo of it in action
这是我制作的辅助方法。它是一个黑客，但它的工作原理：
angular.resetForm = function (scope, formName, defaults) {
$('form[name=' + formName + '], form[name=' + formName + '] .ng-dirty').removeClass('ng-dirty').addClass('ng-pristine');
var form = scope[formName];
form.$dirty = false;
form.$pristine = true;
for(var field in form) {
if(form[field].$pristine === false) {
form[field].$pristine = true;
}
if(form[field].$dirty === true) {
form[field].$dirty = false;
}
}
for(var d in defaults) {
scope[d] = defaults[d];
}
};
希望这对某人有帮助。
答案 3 :(得分：4)
您的表单字段应链接到$ scope中的变量。您可以通过重置变量来重置表单。它可能应该是像$ scope.form这样的单个对象。
假设您有一个简单的用户表单。
app.controller('Ctrl', function Ctrl($scope){
var defaultForm = {
first_name : "",
last_name : "",
address: "",
email: ""
};
$scope.resetForm = function(){
$scope.form = defaultForm;
};
});
只要你的html看起来像这样就会很好用：
<form>
<input ng-model="form.first_name"/>
<input ng-model="form.last_name"/>
<input ng-model="form.address"/>
<input ng-model="form.email"/>
<button ng-click="resetForm()">Reset Form</button>
</form>
也许我在这里不理解这个问题，所以如果这不能解决你的问题，你能解释一下究竟是什么原因吗？
答案 4 :(得分：2)
在这里，我找到了一种解决方案，可以将其从原始状态转变为原始状态。
var def = {
name: '',
password: '',
email: '',
mobile: ''
};
$scope.submited = false;
$scope.regd = function (user) {
if ($scope.user.$valid) {
$http.post('saveUser', user).success(function (d) {
angular.extend($scope.user, def);
$scope.user.$setPristine(true);
$scope.user.submited = false;
}).error(function (e) {});
} else {
$scope.user.submited = true;
}
};
只需编写 angular.extends(src,dst) ，这样您的原始对象就会扩展空白对象，该对象将显示为空白，其余都是默认值。
答案 5 :(得分：1)
使用外部指令和大量的jquery
app.controller('a', function($scope) {
$scope.caca = function() {
$scope.$emit('resetForm');
}
});
app.directive('form', function() {
return {
restrict: 'E',
link: function(scope, iElem) {
scope.$on('resetForm', function() {
iElem.find('[ng-model]').andSelf().add('[ng-form]').each(function(i, elem) {
var target = $(elem).addClass('ng-pristine').removeClass('ng-dirty');
var control = target.controller('ngModel') || target.controller('form');
control.$pristine = true;
control.$dirty = false;
});
});
}
};
});
答案 6 :(得分：0)
简单方法：只需将表单传递给控制器功能即可。 “myForm”表单下方是 this 引用，相当于$ scope。
<div ng-controller="MyController as mc">
<ng-form name="myform">
<input ng-model="mc.myFormValues.name" type="text" required>
<button ng-click="mc.doSometing(this.myform)" type="submit"
ng-disabled="myform.$invalid||myform.$pristine">Do It!</button>
</ng-form>
</div>
控制器：
function MyController(MyService) {
var self = this;
self.myFormValues = {
name: 'Chris'
};
self.doSomething = function (form) {
var aform = form;
MyService.saveSomething(self.myFromValues)
.then(function (result) {
...
aform.$setPristine();
}).catch(function (e) {
...
aform.$setDirty();
})
}
}