如何重置表单，包括删除所有验证错误?
[英] How do I reset a form including removing all validation errors?
本文介绍了如何重置表单，包括删除所有验证错误?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 Angular 表单.这些字段使用 ng-pattern 属性进行验证.我也有一个重置按钮.我正在使用 Ui.Utils Event Binder 来处理 reset 事件像这样:
<div><标签>电话号码<input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/"><div ng-messages="searchForm.phoneNumber.$error"><div class="error" ng-message="pattern">电话号码必须是七位数字</div>
<br><div><button type="reset">Reset</button><button type="submit" ng-disabled="searchForm.$invalid">搜索</button>
</表单>
如您所见，当表单被重置时，它会调用 $scope 上的 reset 方法.这是整个控制器的样子:
angular.module('app').controller('mainController', function($scope) {$scope.resetCount = 0;$scope.reset = 函数(形式){表单.$setPristine();form.$setUntouched();$scope.resetCount++;};$scope.search = function() {alert('正在搜索');};});
我正在按照 另一个问题在 Stack Overflow 上.我添加计数器的唯一原因是为了证明代码正在被调用(确实如此).
问题是即使在重置表单后，验证消息也不会消失.您可以在 Plunker 上查看完整代码.这是显示错误不会消失的屏幕截图:
解决方案
我从@Brett 的评论开始，并以此为基础.我实际上有多个表单，每个表单都有许多字段(不仅仅是显示的两个).所以我想要一个通用的解决方案.
我注意到 Angular form 对象为每个控件(输入、选择、文本区域等)以及其他一些 Angular 属性都有一个属性.但是，每个 Angular 属性都以美元符号 ($) 开头.所以我最终这样做了(包括为了其他程序员的利益而发表的评论):
$scope.reset = function(form) {//每个控件(输入、选择、文本区域等)都被添加为表单的一个属性.//表单还有其他内置属性.但是很容易过滤掉那些，//因为 Angular 团队已经选择用美元符号作为前缀.//所以，我们只是避免那些以美元符号开头的属性.让 controlNames = Object.keys(form).filter(key => key.indexOf('$') !== 0);//将每个控件设置回未定义.这是清除验证消息的唯一方法.//调用 `form.$setPristine()` 不会这样做(即使你希望这样做).for (let name of controlNames) {让控制 = 表单 [名称];control.$setViewValue(undefined);}表单.$setPristine();form.$setUntouched();};
I have an Angular form. The fields are validated using the ng-pattern attribute. I also have a reset button. I'm using the Ui.Utils Event Binder to handle the reset event like so:
<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
<div>
<label>
Area Code
<input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
</label>
<div ng-messages="searchForm.areaCode.$error">
<div class="error" ng-message="pattern">The area code must be three digits</div>
</div>
</div>
<div>
<label>
Phone Number
<input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
</label>
<div ng-messages="searchForm.phoneNumber.$error">
<div class="error" ng-message="pattern">The phone number must be seven digits</div>
</div>
</div>
<br>
<div>
<button type="reset">Reset</button>
<button type="submit" ng-disabled="searchForm.$invalid">Search</button>
</div>
</form>
As you can see, when the form is reset it calls the reset method on the $scope. Here's what the entire controller looks like:
angular.module('app').controller('mainController', function($scope) {
$scope.resetCount = 0;
$scope.reset = function(form) {
form.$setPristine();
form.$setUntouched();
$scope.resetCount++;
};
$scope.search = function() {
alert('Searching');
};
});
I'm calling form.$setPristine() and form.$setUntouched, following the advice from another question here on Stack Overflow. The only reason I added the counter was to prove that the code is being called (which it is).
The problem is that even after reseting the form, the validation messages don't go away. You can see the full code on Plunker. Here's a screenshot showing that the errors don't go away:
解决方案
I started with the comment from @Brett and built upon it. I actually have multiple forms and each form has many fields (more than just the two shown). So I wanted a general solution.
I noticed that the Angular form object has a property for each control (input, select, textarea, etc) as well as some other Angular properties. Each of the Angular properties, though, begins with a dollar sign ($). So I ended up doing this (including the comment for the benefit of other programmers):
$scope.reset = function(form) {
// Each control (input, select, textarea, etc) gets added as a property of the form.
// The form has other built-in properties as well. However it's easy to filter those out,
// because the Angular team has chosen to prefix each one with a dollar sign.
// So, we just avoid those properties that begin with a dollar sign.
let controlNames = Object.keys(form).filter(key => key.indexOf('$') !== 0);
// Set each control back to undefined. This is the only way to clear validation messages.
// Calling `form.$setPristine()` won't do it (even though you wish it would).
for (let name of controlNames) {
let control = form[name];
control.$setViewValue(undefined);
}
form.$setPristine();
form.$setUntouched();
};
这篇关于如何重置表单，包括删除所有验证错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
