Javascript 在表单提交时以编程方式将所有表单字段设置为 ng-touched
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30628611/
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
Programmatically set all form fields to ng-touched on form submission
提问by Derek
HTML:
HTML：
<div class="form-group"
ng-class="{ 'has-error' : form.firstName.$invalid && form.firstName.$touched }">
<label for="firstName"
class="control-label">
First Name
</label>
<input type="text"
name="firstName"
id="firstName"
ng-model="editableUser.firstName"
class="form-control"
required>
<span class="help-block"
ng-show="form.firstName.$error.required && form.firstName.$touched">
First Name is required
</span>
</div>
<input type="submit"
ng-click="submit()"
value="Submit"
class="btn btn-default">
I'm trying to get my the 'has-error' class to kick in for invalid fields when a user clicks submit.
当用户点击提交时，我试图让我的 'has-error' 类启动无效字段。
I would think you could do something like this:
我认为你可以做这样的事情：
$scope.submit = function () {
if ($scope.form.$invalid) {
angular.forEach($scope.form.$invalid, function(field) {
field.$setTouched();
});
alert("Form is invalid.");
}
};
But there is no $setTouchedmethod in https://docs.angularjs.org/api/ng/type/form.FormController
但是https://docs.angularjs.org/api/ng/type/form.FormController 中没有$setTouched方法
EDIT:Realize $setToucheddoes exist, it's in https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
编辑：实现$setTouched确实存在，它在https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
回答by Alex Paramonov
if ($scope.form.$invalid) {
angular.forEach($scope.form.$error, function (field) {
angular.forEach(field, function(errorField){
errorField.$setTouched();
})
});
alert("Form is invalid.");
}
plunker: http://plnkr.co/edit/XmvoTkIQ0yvFukrVSz11
plunker：http://plnkr.co/edit/XmvoTkIQ0yvFukrVSz11
回答by henkieee
Try the recently added $submitted
试试最近添加的 $submitted
<input type="text"
name="firstName"
id="firstName"
ng-model="editableUser.firstName"
class="form-control"
required>
<span class="help-block"
ng-show="form.firstName.$error.required && (form.firstName.$touched || form.$submitted">
First Name is required
回答by Klaster_1
Extending on Alexey's answer, you can add new method to FormController that will do the same, so there's no need to copy code from one submit function to another:
扩展 Alexey 的回答，您可以向 FormController 添加新方法来执行相同的操作，因此无需将代码从一个提交函数复制到另一个：
// config.js
export default function config($provide) {
$provide.decorator('formDirective', $delegate => {
const fn = $delegate[0].controller.prototype
if (!('$setTouched' in fn)) fn.$setTouched = function() {
if (this.$invalid) {
Object.values(this.$error).forEach(controls => {
controls.forEach(control => control.$setTouched())
})
}
}
return $delegate
})
}
// controller.js
$scope.submit = function () {
if ($scope.form.$invalid) {
$scope.form.$setTouched();
alert("Form is invalid.");
}
};
In case someone wonders why would anyone want to do this kind of validation: iOS constraint validation is lacking, so ng-submitgets called even on invalid forms.
如果有人想知道为什么有人想要进行这种验证：缺少 iOS 约束验证，因此ng-submit即使在无效表单上也会被调用。
回答by Hemant
The above answers did not work for me.. to programatically set Touched true.
以上答案对我不起作用..以编程方式将Touched设置为true。
example, even after executing this $scope.frmUser["U_Name"].$setTouched();$scope.frmUser["U_Name"].$invalidalways stayed true.
例如，即使在执行之后，这$scope.frmUser["U_Name"].$setTouched();$scope.frmUser["U_Name"].$invalid始终保持为真。
And submit button was to be enabled only if $scope.frmUser.$invalidis false
并且提交按钮仅在$scope.frmUser.$invalid为 false时才启用
Instead taking scope variable for each of fields to be set from programatically from javascript and setting it true / false worked fine.
取而代之的是从 javascript 以编程方式设置每个字段的范围变量并将其设置为 true / false 工作正常。
回答by rtn
If you fancy uisng ES6 + lodash fp
如果你喜欢使用 ES6 + lodash fp
import forEach from 'lodash/fp/forEach'
validate()
{
forEach(forEach(field => field.$setTouched()))(this.form.$error)
}
<form name="$ctrl.form">...</form>
回答by Ben Heymink
I'm not sure why you think you have to 'touch' the fields, just use regular form validation; you simply need to wrap your fields in an actual form element, then let angular take care of the validation for you. Here is a working example..
我不确定为什么您认为必须“触摸”字段，只需使用常规表单验证；您只需要将您的字段包装在一个实际的表单元素中，然后让 angular 为您处理验证。这是一个工作示例。.
You really don't need to check for $touched, or even set it (unless there is a specific reason why you need to do this?) - just use the required attribute on the input fields if they are required fields:
您真的不需要检查 $touched，甚至不需要设置它（除非有特定的原因需要这样做？） - 如果输入字段是必填字段，只需在输入字段上使用 required 属性：
<input name="namefield" "text" ng-model="user.firstName" required/>
