Javascript 如何从表单标签之外的按钮手动触发 AngularJS 验证？

How to manually trigger AngularJS validation from a button outside of the form tags?

提问by Hao

Given this code:

鉴于此代码：

<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!');
    };
}

I want the last button to trigger the validation(then submit when things are valid) on first form. As of now, only the button inside the form can trigger that form's validation and submission. Is there any possible way for a button outside the form to do that?

我希望最后一个按钮在第一个表单上触发验证（然后在事情有效时提交）。截至目前，只有表单内的按钮可以触发该表单的验证和提交。表单外的按钮有什么可能的方法来做到这一点吗？

Live test: http://jsfiddle.net/dzjV4/1/

现场测试：http: //jsfiddle.net/dzjV4/1/

回答by Milan Jaric

You can create directive which you can then attach to <a class="btn".... Check this jsfiddle

您可以创建指令，然后将其附加到<a class="btn".... 检查这个jsfiddle

http://jsfiddle.net/dzjV4/2/

http://jsfiddle.net/dzjV4/2/

Note that I added to <input type='submit' id='clickMe'...and linked it with link at the bottom <a class='btn' linked="clickMe"...

请注意，我添加<input type='submit' id='clickMe'...并链接到底部的链接<a class='btn' linked="clickMe"...

回答by user2209108

Ideally there'd be a programmatic way to cause validation to re-run across a form. I have not investigated that completely but had a situation that required multiple controls to be re-validated based on different data in the scope -- without the user interacting with the individual controls. This arose because the form had two action buttons which each required different validation rules be in play when they were clicked.

理想情况下，应该有一种编程方式来使验证在表单上重新运行。我还没有完全调查过，但有一种情况需要根据范围内的不同数据重新验证多个控件 - 无需用户与单个控件交互。这是因为表单有两个操作按钮，每个按钮在单击时都需要不同的验证规则。

The UI requirement changed before I fully implemented forcing re-validation but before it did I got most of what I needed by copying and then re-setting the form's data. This forced re-validation across the form within the current scope. Basically, it's along the lines of the following (not tested, but taken from the code that was working). In this case the form's data was bound to the properties in one object.

在我完全实施强制重新验证之前，UI 要求发生了变化，但在此之前，我通过复制然后重新设置表单的数据获得了大部分我需要的东西。这会强制在当前范围内跨表单重新验证。基本上，它遵循以下几行（未经测试，但取自正在运行的代码）。在这种情况下，表单的数据绑定到一个对象中的属性。

var formData = $parse(<form's model>); 
var dataCopy = angular.copy( formData($scope) ); 
formData.assign( $scope, dataCopy );

回答by Capt. Rochefort

This may or may not be acceptable, but if you can get away with the SUBMIT button being disabled until the form is completed, you can do this:

这可能是也可能不可接受，但是如果您可以在表单完成之前禁用提交按钮，您可以这样做：

<form name="formName">
 <input ng-required="true" />
</form>
<button ng-click="someFunction()" ng-disabled="formName.$invalid" />

It's also worth noting that this works in IE9 (if you're worried about that).

还值得注意的是，这适用于 IE9（如果您担心的话）。

回答by Linh

    for (control of $scope.[form name].$$controls) {
        control.$setDirty();
        control.$validate();
    }

You can try the above codes. Make it running before submit.

你可以试试上面的代码。在提交之前让它运行。

回答by Charles Naccio

Since my form fields only show validation messages if a field is invalid, and has been touched by the user:

由于我的表单字段仅在字段无效且已被用户触摸时才显示验证消息：

<!-- 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 -->

I was able to use this code triggered by a button to show my invalid fields:

我能够使用由按钮触发的此代码来显示我的无效字段：

// 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;
}

回答by Daiwei

Give your form a name:

为您的表单命名：

<div ng-controller="MyCtrl">
    <form name="myForm">
        <input name="myInput" />
    </form>
</div>

So you can access your form validation status on your scope.

因此，您可以在范围内访问表单验证状态。

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
})

angular doc

角度文档

There is no way to trigger browser form behavior outside of a form. You have to do this manually.

无法在表单之外触发浏览器表单行为。您必须手动执行此操作。