53
A
回答
91
使用$dirty
标志显示错误的用户后,才与输入互动:
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span>
</div>
如果你想在用户提交表单后,才比你可以使用一个单独的标志变量来触发错误在:
<form ng-submit="submit()" name="form" ng-controller="MyCtrl">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="(form.email.$dirty || submitted) && form.email.$error.required">
Email is required
</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
function MyCtrl($scope){
$scope.submit = function(){
// Set the 'submitted' flag to true
$scope.submitted = true;
// Send the form to server
// $http.post ...
}
};
然后,如果所有的JS里面ng-show
表情看起来太适合你,你可以抽象成一个独立的实现方法具d:
function MyCtrl($scope){
$scope.submit = function(){
// Set the 'submitted' flag to true
$scope.submitted = true;
// Send the form to server
// $http.post ...
}
$scope.hasError = function(field, validation){
if(validation){
return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]);
}
return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid);
};
};
<form ng-submit="submit()" name="form">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="hasError('email', 'required')">required</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
0
埃里克·艾格纳,
请使用$脏(现场已被修改)和$无效(字段内容无效)。
请检查下面的角表单验证
1)
验证例如HTML示例用于用户输入的输入:
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
</form>
2)
验证例如HTML/JS用于用户提交:
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation="">
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit">
</p>
</form>
自定义指令:
app.directive('formSubmitValidation', function() {
return {
require: 'form',
compile: function (tElem, tAttr) {
tElem.data('augmented', true);
return function (scope, elem, attr, form) {
elem.on('submit', function ($event) {
scope.$broadcast('form:submit', form);
if (!form.$valid) {
$event.preventDefault();
}
scope.$apply(function() {
scope.submitted = true;
});
});
}
}
};
})
3)
你不希望像下面
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate ng-change="submitFun()">
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span ng-show="submitted || myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit">
</p>
</form>
控制器SubmitFun()JS使用指令使用NG-切换功能:
var app = angular.module('example', []);
app.controller('exampleCntl', function($scope) {
$scope.submitFun = function($event) {
$scope.submitted = true;
if (!$scope.myForm.$valid)
{
$event.preventDefault();
}
}
});
3
如果您想在表单提交中显示错误消息,则可以使用条件form.$submitted
来检查是否尝试提交表单。检查下面的例子。
<form name="myForm" novalidate ng-submit="myForm.$valid && createUser()">
<input type="text" name="name" ng-model="user.name" placeholder="Enter name of user" required>
<div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
<div ng-message="required">Please enter user name.</div>
</div>
<input type="text" name="address" ng-model="user.address" placeholder="Enter Address" required ng-maxlength="30">
<div ng-messages="myForm.name.$error" ng-if="myForm.$submitted">
<div ng-message="required">Please enter user address.</div>
<div ng-message="maxlength">Should be less than 30 chars</div>
</div>
<button type="submit">
Create user
</button>
</form>
1
您可以使用angularjs窗体状态form.$submitted
。 最初form.$submitted
的值将为false
,成功提交表单后将变为true
。表单元素上验证
0
调用可以通过该元素上的触发改变事件进行处理:
一个)为例:触发改变分离元件上形式
$scope.formName.elementName.$$element.change();
B)为例:触发改变事件每个例如在NG-提交,NG-点击,NG-模糊的表单元素...
vm.triggerChangeForFormElements = function() {
// trigger change event for each of form elements
angular.forEach($scope.formName, function (element, name) {
if (!name.startsWith('$')) {
element.$$element.change();
}
});
};
c)和另一种方式为
var handdleChange = function(form){
var formFields = angular.element(form)[0].$$controls;
angular.forEach(formFields, function(field){
field.$$element.change();
});
};
相关问题
- 1. jQuery验证:仅在字段验证时提交表单
- 2. 用户输入时验证并提交验证
- 3. 在表单验证失败时仅输入一次验证码?
- 4. MVC3仅限提交表单的验证
- 5. 如何在提交之前单击输入提交时验证输入?
- 6. 在提交时验证多个输入
- 7. 提交前验证表单域
- 8. 验证用户输入或
- 9. 验证表单提交时的输入框
- 10. 仅使用javascript验证表单并阻止用户提交JS禁用表单?
- 11. rails输入验证提交表格
- 12. 如何在用户点击提交时验证MDL表单?
- 13. 使用submithandler(jquery验证)在验证时提交表单
- 14. 使用Javascript提交HTML5表单并验证其输入
- 15. 验证表单不在空输入框上提交
- 16. 验证表单在提交前输入ajax
- 17. 在提交表单之前验证输入字段
- 18. 表单验证提交
- 19. 表单验证不提交
- 20. 提交Redux表单验证
- 21. 提交PHP验证表单
- 22. 表单提交验证
- 23. PHP表单验证提交
- 24. 验证表单提交
- 25. jQuery表单提交验证
- 26. 表单提交时未验证
- 27. 当JavaScript验证时表单不提交
- 28. 当使用ajax和php提交表单提交时验证captcha
- 29. 使用输入类型提交时,html5表单验证不起作用
- 30. AngularJS验证仅提交
'$脏'做了伎俩。 –
刚开始与Angular和抽象的“hasError”方法真的很好,谢谢! – daddywoodland
hasError函数似乎无法使用角度1.2工作。它看起来不像控制器可以访问表单。 –