Javascript 如何在 angularjs 中重置表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31585515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I reset a form in angularjs?
提问by Nico Prediger
See Fiddle: http://jsfiddle.net/hejado/7bqjqc2w/
见小提琴：http: //jsfiddle.net/hejado/7bqjqc2w/
I'm trying to form.reset() my form using angular.
我正在尝试使用 angular 来 form.reset() 我的表单。
HTML:
HTML：
<div ng-controller="formCtrl">
<form name="resetme" id="resetme">
<input ng-model="text" type="text" />
<input file-model="file" type="file" />
<button type="button" ng-click="resetForm()">reset</button>
</form>
</div>
JS:
JS：
.controller('formCtrl', function($scope) {
$scope.resetForm = function() {
//$scope.resetme.reset();
document.getElementById('resetme').reset();
};
});
Please note:I'm using this kind of form to ajax-upload a file. The page is not refreshing and I don't want to use any reset-buttons. (I'm using one in the fiddle for simplicity.) I want to call the reset-function after the fileupload is finished (via http success).
请注意：我正在使用这种形式来 ajax 上传文件。页面没有刷新，我不想使用任何重置按钮。（为了简单起见，我在小提琴中使用了一个。）我想在文件上传完成后调用重置函数（通过 http 成功）。
I'm using
我正在使用
<input type="file" />
so I can't reassign empty values to all my inputs, because file inputs are readonly.
所以我不能为我的所有输入重新分配空值，因为文件输入是只读的。
Calling the reset() function on the DOM element works, but I was told talking to the DOM in angular would be evil, so...
在 DOM 元素上调用 reset() 函数是有效的，但有人告诉我以 angular 与 DOM 交谈是邪恶的，所以......
I'd like to know, how this would be done the angular way. I tried naming the form and referencing it via $scope.formnamebut I'm not able to call Web API functions... (commented line)
我想知道，这将如何以角度方式完成。我尝试命名表单并通过 $scope 引用它。formname但我无法调用 Web API 函数...（注释行）
How can I achieve this?
我怎样才能做到这一点？
UPDATEAfter reading some of the answers, I should make clear, that I am using ngModel and a custom directive fileModelto get a hold of the file-object.
更新在阅读了一些答案之后，我应该明确指出，我正在使用 ngModel 和自定义指令fileModel来获取文件对象。
Some of the solutions worked in resetting the value of the input field, but the model is not cleared (neither file, nor text). Custom directives are the answer to that, but this kinda exceeds the scope of this question.
一些解决方案在重置输入字段的值时起作用，但模型未清除（既不是文件也不是文本）。自定义指令是答案，但这有点超出了这个问题的范围。
回答by Jason Cust
I wrote about this topica couple years ago. I don't know if the Angular team has yet implemented a native form reset directive but you can do so yourself. There are a couple caveats to this implementation: it only works for one model (if you need to support more see the followup post) and the issue of when to initialize the original values. Also, I never tested this with file inputs so I am not sure it would work with those.
几年前我写过关于这个话题的文章。我不知道 Angular 团队是否已经实现了原生表单重置指令，但你可以自己实现。这个实现有几个注意事项：它只适用于一个模型（如果你需要支持更多，请参阅后续文章）以及何时初始化原始值的问题。另外，我从来没有用文件输入测试过这个，所以我不确定它是否适用于那些。
There was an issuefor this but it was closed due to inactivity. :/
有一个问题，但由于不活动而关闭。：/
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope',
function($scope) {
$scope.myModel = {
foo: 'Boop',
bar: 'Beep'
};
$scope.myModelCopy = angular.copy($scope.myModel);
}
]);
myApp.directive('resetDirective', ['$parse',
function($parse) {
return function(scope, element, attr) {
var fn = $parse(attr.resetDirective);
var masterModel = angular.copy(fn(scope));
// Error check to see if expression returned a model
if (!fn.assign) {
throw Error('Expression is required to be a model: ' + attr.resetDirective);
}
element.bind('reset', function(event) {
scope.$apply(function() {
fn.assign(scope, angular.copy(masterModel));
scope.form.$setPristine();
});
// TODO: memoize prevention method
if (event.preventDefault) {
return event.preventDefault();
} else {
return false;
}
});
};
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<form reset-directive="myModel" name="form">
<input type="text" ng-model="myModel.foo" />
<input type="text" ng-model="myModel.bar" />
<input type="reset" value="Reset" />
<pre>myModel: {{ myModel | json }}</pre>
<pre>myModelCopy: {{ myModelCopy | json }}</pre>
<pre>form pristine: {{ form.$pristine }}</pre>
</form>
</div>
</body>回答by Bhavin Solanki
You can try :
你可以试试 ：
<a href="#" ng-click="resetForm()">reset</a>
$scope.resetForm = function(form) {
//Even when you use form = {} it does not work
form.fieldA = null;
form.fieldB = null;
///more fields
}
Or
或者
$scope.resetForm = function(form) {
//Even when you use form = {} it does not work
angular.copy({},form);
}
回答by Parris Varney
You'd want to attach ng-model to each of your input fields then null them out via $scope. Either that or make a custom directive
您希望将 ng-model 附加到每个输入字段，然后通过 $scope 将它们清空。要么做一个自定义指令
回答by blue
If you don't want to use ng-model and proper reset type of button you can use this code, however this is not proper angular way to reset the form but it will work
如果您不想使用 ng-model 和正确的按钮重置类型，您可以使用此代码，但这不是重置表单的正确角度方式，但它会起作用
$scope.reset = function(){
$('form').children('*').each(function(){
$(this).val('');
});
}
Here's the Plunker
这是Plunker
回答by Clarke Hurt
I've just had a similar problem with forms not resetting. Here's what I would do:
我刚刚遇到了类似的表单未重置问题。这是我会做的：
In your resetform() function, I would include statements that set both of your ng-models in your input to "". For example:
在您的 resetform() 函数中，我将包含将输入中的两个 ng-model 设置为“”的语句。例如：
**HTML**
<input ng-model="text" type="text" />
<input file-model="file" type="file" />
**JS**
.controller('formCtrl', function($scope) {
$scope.resetForm = function() {
$scope.text = "";
$scope.file = null;
};
});
Not certain if this will work for file-models but I'm certain it will remove the text. Best of luck!
不确定这是否适用于文件模型，但我确定它会删除文本。祝你好运！
回答by Birmal Jankar
To reset the form data use following code :
要重置表单数据，请使用以下代码：
$scope.resetEmployeeData = function() {
$scope.employeeCred.userName = '';
$scope.employeeCred.employeeNo = '';
$scope.employeeCred.sapNo = '';
$scope.employeeCred.emailD = '';
$scope.employeeCred.mobileNo = '';
**this**.createEmployee.$setPristine();
**this**.createEmployee.$setUntouched();
};
use thisrather than $scope.
使用this而不是$scope.
