Question

鉴于此代码：

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

Answer 1

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

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

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

链接相关联

Answer 2

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

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

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

Answer 3

这可能是也可能是不可接受的，但如果您可以在表单完成之前取消禁用SUBMIT按钮，则可以执行以下操作：

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

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

Answer 4

为表单命名：

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

angular doc

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

Answer 5

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

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

Answer 6

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

您可以尝试以上代码。在提交之前让它运行。

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

6 个答案: