如何从表单标签之外的按钮手动触发 AngularJS 验证? [英] How to manually trigger AngularJS validation from a button outside of the form tags?

问题描述

鉴于此代码:

<form ng-submit="onSubmitted()">标题输入:<input type="name" ng-model="sample" required/><input type="name" ng-model="sampleX" required/><input type="submit" value="这个提交触发验证.但我想把这个按钮放在页面的末尾"/></表单><小时/>这里有一些其他形式.考虑订单项<小时/><a class="btn" ng-click="/* 应该放什么在这里，所以这可以触发第一个表单的验证，然后提交?*/">想要这个提交按钮触发验证+提交此按钮不属于的表单
var app = angular.module('myApp', []);函数 MyCtrl($scope) {$scope.onSubmitted = 函数(){alert('提交了！');};}

我希望最后一个按钮在第一个表单上触发验证(然后在事情有效时提交).截至目前，只有表单内的按钮可以触发该表单的验证和提交.有没有办法让表单外的按钮做到这一点?

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

解决方案

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

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

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

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/

解决方案

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

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"...

这篇关于如何从表单标签之外的按钮手动触发 AngularJS 验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！