Onsen ui:ons按钮提交dos'Don’不要提交表格

Onsen-ui: ons-button submit doesn't submit the form

本文关键字：提交 Don 表格 ui ons 按钮 dos Onsen      更新时间：2023-09-26

我在onsen ui中构造了一个普通表单，但如果我尝试使用ons-button而不是普通的button，则表单不会提交。

<!-- doesn't work -->
<ons-button type="submit">Submit</ons-button>
<!-- works -->
<button type="submit">Submit</button>

这是我使用AngularJS处理的一个表单。我注意到有一个类似的问题已经解决，但我使用的是OnsenUI v1.14，它现在应该包含这个修复程序。

如果有帮助的话，这就是ons-button正在生成的HTML标记：

<ons-button type="submit" class="ng-isolate-scope button effeckt-button slide-left"><span class="label ons-button-inner"><span class="ng-scope">Submit</span></span>
  <span class="spinner button__spinner "></span>
</ons-button>

看起来Onsen不会支持这一点：https://github.com/OnsenUI/OnsenUI/issues/1538

我的解决方案是使用一个普通的按钮，但将类设置为"按钮"，以便接收Onsen样式：

<button type="submit" class="button">

因为ons按钮指令不支持"提交"，所以在这种情况下请使用普通按钮而不是ons按钮。我会向Onsen UI团队报告。

您可以尝试如下，将ons开关作为一个角度模型，并在提交时进行检查。

javascript

  $scope.testClick = function(item) {
    console.log($scope.switch);
    console.log(item);
 }

markup

<ons-list-item>
    <ons-switch  ng-click="switch(switch)" ng-model="switch" checked></ons-switch>
</ons-list-item>
<ons-button ng-click="testClick(item)">Lorem</ons-button>
相关文章：