重置形式为原始状态(AngularJS 1.0.x)
将表单字段重置为原始状态(重置脏状态)的函数位于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()上的控制器
- 保存原始未触及的HTML
- 重新编译保存的原始HTML
- 从DOM中删除当前表单
- 将新编译的模板插入DOM中
JavaScript：
var pristineFormTemplate = $('#myform').html();
$scope.resetForm = function () {
$('#myform').empty().append($compile(pristineFormTemplate)($scope));
}回答 7
Stack Overflow用户
发布于 2013-04-30 09:50:36
没有解决办法的解决方案
我想出了一个解决方案，它使用AngularJS，没有任何解决办法。这里的诀窍是使用AngularJS功能拥有多个具有相同名称的指令。
正如其他人所提到的，实际上存在一个拉请求(https://github.com/angular/angular.js/pull/1127)，它将其放入AngularJS 1.1.x分支，该分支允许重新设置表单。提交此拉请求会更改ngModel和form/ngForm指令(我本来希望添加一个链接，但Stackoverflow不希望我添加两个以上的链接)。
现在，我们可以定义自己的ngModel和form/ngForm指令，并使用拉请求中提供的功能对它们进行扩展。
我已经将这些指令包装在一个名为AngularJS的resettableForm模块中。您所要做的就是将这个模块包含到您的项目中，而您的AngularJS版本1.0.x在这方面的行为就好像它是一个角度为1.1.x的版本。
“一旦你更新到1.1.x，你甚至不需要更新你的代码，只要删除模块，你就完成了！”
该模块还通过了添加到1.1.x分支的所有测试，以实现表单重置功能。
您可以在我创建的jsFiddle (http://jsfiddle.net/jupiter/7jwZR/1/)示例中看到该模块。
步骤1:在项目中包括resettableform模块
(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);步骤2:在控制器上提供一个重新设置模型的方法
请注意，当您重置表单时，您必须重置模型。在控制器中，您可以写：
var myApp = angular.module('myApp', ['resettableForm']);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.form.$setPristine();
$scope.model = '';
};
}步骤3:将此方法包含在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>Stack Overflow用户
发布于 2013-09-23 16:10:24
我认为值得一提的是，在后来版本的角(例如1.1.5)中，您可以在表单上调用$setPristine。
$scope.formName.$setPristine(true)这也将将所有窗体控件设置为原始状态。
FormController.$setPristine
Stack Overflow用户
发布于 2012-09-26 21:34:05
编辑..。我要删除我的旧答案，因为它是不够的。
实际上，我自己也遇到了这个问题，这是我的解决方案:我给角做了一个扩展方法。我是这样做的，我遵循了$scope.form.$setValidity()正在做的一些事情(相反).
这是一个正在运行的plnkr演示
这是我创建的助手方法。这是一次黑客攻击，但它有效：
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];
}
};希望这对某人有帮助。
https://stackoverflow.com/questions/12603914
复制相似问题
腾讯云开发者
