Question

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

<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()所以如果必填字段为空，浏览器将提示用户填写。如何从按钮提交表单形式之外？

Answer 1

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

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

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

Answer 2

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

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

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

以编程方式提交角度表单，仍然会收到HTML5验证错误

2 个答案: