如何从表单标签外部的按钮手动触发 AngularJS 验证
How to manually trigger AngularJS validation from a button outside of the form tags?
给定此代码:
<div ng-controller="MyCtrl">
<form ng-submit="onSubmitted()">
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="/* what could should be put here, so this can trigger the firt form's validation, then submit? */">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>
</div>
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.onSubmitted = function() {
alert('submitted!');
};
}
我希望最后一个按钮在第一个表单上触发验证(然后在有效时提交)。截至目前,只有表单内的按钮可以触发该表单的验证和提交。表单外的按钮有什么可能的方法可以做到这一点吗?
现场测试:http://jsfiddle.net/dzjV4/1/
您可以创建指令,然后将其附加到<a class="btn"...
。检查这个jsfiddle
http://jsfiddle.net/dzjV4/2/
请注意,我添加到<input type='submit' id='clickMe'...
并使用底部的链接将其链接<a class='btn' linked="clickMe"...
for (control of $scope.[form name].$$controls) {
control.$setDirty();
control.$validate();
}
您可以尝试上述代码。使其在提交之前运行。
理想情况下,有一种编程方法可以使验证在窗体中重新运行。我还没有完全调查过,但有一种情况,需要根据范围内的不同数据重新验证多个控件 - 用户无需与单个控件交互。这是因为表单有两个操作按钮,每个按钮在单击它们时都需要不同的验证规则。
在我完全实现强制重新验证之前,UI 要求发生了变化,但在此之前,我通过复制然后重新设置表单的数据获得了大部分我需要的东西。这会强制在当前范围内跨表单重新验证。基本上,它遵循以下内容(未测试,但取自正常工作的代码)。在这种情况下,表单的数据绑定到一个对象中的属性。
var formData = $parse(<form's model>);
var dataCopy = angular.copy( formData($scope) );
formData.assign( $scope, dataCopy );
这可能是可以接受的,也可能是不可接受的,但如果您可以在表单完成之前禁用 SUBMIT 按钮,您可以这样做:
<form name="formName">
<input ng-required="true" />
</form>
<button ng-click="someFunction()" ng-disabled="formName.$invalid" />
还值得注意的是,这适用于IE9(如果您担心这一点)。
为表单命名:
<div ng-controller="MyCtrl">
<form name="myForm">
<input name="myInput" />
</form>
</div>
因此,您可以在范围内访问表单验证状态。
app.controller('MyCtrl', function($scope) {
$scope.myForm.$valid // form valid or not
$scope.myForm.myInput // input valid or not
// do something with myForm, e.g. display a message manually
})
角度文档
无法在表单之外触发浏览器表单行为。您必须手动执行此操作。
由于我的表单字段仅在字段无效且已被用户触摸时才显示验证消息:
<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">
<!-- field label -->
<label class="control-label">Suffix</label>
<!-- end field label -->
<!-- field input -->
<select name="Parent_Suffix__c" class="form-control"
ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
ng-model="rfi.contact.Parent_Suffix__c" />
<!-- end field input -->
<!-- field help -->
<span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
<span ng-message="required">this field is required</span>
</span>
<!-- end field help -->
</div>
<!-- end form field -->
我能够使用由按钮触发的这段代码来显示我的无效字段:
// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
angular.forEach(error, function(field) {
field.$setTouched();
});
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
isValid = false;
}
- 使用angularjs验证文本框中的电子邮件
- angularjs复选框验证至少两个
- AngularJs Cordova安卓应用程序中输入的4位密码PIN验证
- 验证对象是否为null Javascript/Angularjs
- AngularJS中的循环号验证
- 使用正则表达式angularjs验证文件路径
- 如何在JavaScript而不是HTML元素中设置AngularJS验证
- 使用angularJs ng模式进行10位Regex验证
- 为什么Angularjs验证don't与输入[type=“number”]一起工作
- AngularJs:在数字输入字段中设置验证的条件最小值和最大值
- AngularJs日期验证;我不适用于IE和Mozilla
- 模态弹出窗口验证 AngularJS
- ng-message不适用于重新键入密码验证AngularJS
- 如何验证 angularjs 中的 3 个复选框中是否至少选中了一个复选框
- 验证AngularJS集合是否包含项
- 正在验证AngularJS中的下拉菜单
- 提交表单后如何重置表单和验证(AngularJS)
- 验证AngularJS的单选按钮
- 提交按钮验证(angularjs)
- ng模式验证Angularjs中的个位数