AngularJS验证ng-valid类仅在提交后
AngularJS validation ng-invalid class only after submit
在我的 from 中,我有几个验证输入,我需要仅在用户提交表单后应用 ng-invalid
类。
提交时,我可以在范围上设置一个值,如下所示...
$scope.submitForm = function () {
$scope.submited = true;
// other bits
}
。但我无法弄清楚如何在不更改验证本身的情况下有条件地显示ng-invalid
。
我正在运行角度1.1.5
演示
<input type="email" name="email" ng-model="formData.email" required />
<span ng-show="(myForm.email.$dirty || submitted) && myForm.email.$error.required">
Email is required
</span>
使用$dirty标志仅在用户与输入交互后显示错误:
<div ng-app>
<div ng-controller="testController">
<form name="formValidate">
<input type="text" name="testing" required ng-model="testField" ng-class="{ invalid: submitted && formValidate.testing.$invalid }"/>
<button ng-click="test()">Test</button>
</form>
</div>
</div>
<script>
var app = angular.module('', []);
function testController($scope)
{
$scope.submitted = false;
$scope.test= function()
{
$scope.submitted = true;
console.log($scope.formValidate.$invalid);
}
}
</script>
<style>
.invalid
{
border:1px solid red;
}
</style>
对于自定义错误,我建议在每个字段中使用 $setValidity 方法。
$scope.formName.fieldName.$setValidity('custom_error_name', true);
因此,您也可以更好地控制CSS部分,因为这种工作流程还将在您的字段中创建一个自定义类,例如" ng-custom_error_name",以便您可以处理它。
相关文章:
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 自定义表单验证和提交
- 带有验证和隐藏字段值的提交按钮
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 我这里有两个表格,在提交验证第一个表格后,我如何转到第二个表格进行验证
- 未执行Ajax隐藏表单提交验证
- 提交/验证Jquery
- 使用提交验证日期输入字段
- JavaScript表单提交验证会干扰其他提交按钮
- HTML表单提交验证没有't为JS函数工作
- j查询表单提交验证未提交
- 仅将 jQuery 表单提交验证应用于 2 个提交按钮中的 1 个
- 为什么这个表单总是提交…验证javascript不起作用
- jQuery blockUI插件不工作在ASP.. NET提交验证器Chrome/IE9
- Redux表单提交验证不设置错误消息
- JavaScript 在提交验证时无法正常工作,当我单击提交它询问到期日期和 CVV
- 表单提交验证动态下拉列表数
- 禁用JS提交验证检查
- onChange提交验证