以编程方式提交 Angular 表单，但仍然出现 HTML5 验证错误答案

【问题标题】：Submit an angular form programmatically and still get HTML5 validation errors以编程方式提交 Angular 表单，但仍然出现 HTML5 验证错误
【发布时间】：2014-12-31 23:33:20
【问题描述】：

我的页面顶部有一个保存按钮，一个搜索表单，然后是我可以编辑项目的表单。它看起来像这样：

<button type="button" ng-click="save()">Save</button>

<form name="searchForm" ng-submit="search()">
  <input type="text" ng-model="criteria" />
</form>

<form name="saveForm" ng-submit="save()">
  <input type="text" ng-model="item.field" required />
</form>

我希望我的保存按钮提交保存表单，而不是直接调用save()，因此如果必填字段为空，浏览器将提示用户填写。如何从外部按钮提交表单形式？

【问题讨论】：

标签： javascript angularjs html forms validation

【解决方案1】：

如果您想使用 HTML5 验证，我很确定您必须使用真正的提交输入，而不是角按钮。

理论上，您可以在标准提交输入上使用 HTML5 'form' 属性来实现此效果。见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-form。但是，您需要仔细检查浏览器的兼容性。

如果这不起作用，我怀疑您将不得不退回到将您的提交输入放在您的标记中的表单中，然后使用“聪明”的 CSS 将您的按钮重新定位到页面上您需要它的位置。

【讨论】：

谢谢，我不知道form 属性。这可能有一天会派上用场。您的答案是一个很好的解决方案，所以我将其标记为答案，但我必须支持旧版浏览器，所以我发布了另一个答案，其中包含我为使其正常工作所做的工作。
是的，这正是我所期望的。不过我不得不分享表单属性，前一周我在阅读其他 HTML5 改进时才读到它。总有一天:)

【解决方案2】：

由于我需要支持旧版浏览器，我无法使用 Dana 的答案。我最终在页面底部添加了一个 id 为“saveButton”的提交按钮，然后将顶部按钮更改为：

<button type="button" onclick="document.getElementById('saveButton').click()">
    Save
</button>

我知道这不是 Angular 做事的方式，我觉得这样做很脏，但它确实有效。

【讨论】：