如何防止在表单中使用多个按钮时触发提交/ng-提交事件

How to prevent submit/ng-submit event from triggering when using multiple buttons inside a form

本文关键字：提交 事件 ng- 按钮 表单 何防止      更新时间：2023-09-26

单击执行该功能getPhoto()拍照按钮，表单自动执行funcSubmit() ng-submit功能。需要改变什么来防止这种情况发生？它只执行getPhoto()的功能，而不ng-submit窗体运行。

Ps .：此代码是应用程序安卓手机的一部分，使用离子框架开发

<ion-view title="OS">
    <form ng-submit = "funcSubmit()">
        <ion-content class="has-header"> 
            <ion-list >
                <ion-item >
                    <button name="fota" class="button button-block button-positive" ng-click="getPhoto()">
                        <i class="icon ion-ios7-camera"> Photo</i>                      
                    </button>
                </ion-item >
            </ion-list >
        </ion-content>
        <div class="bar bar-footer bar-stable">
            <button name="canc" class="button button-light" ui-sref="app.padronis">Cancel</button>
            <button name="subm" class="button button-light" type="submit">Save</button>     
        </div>
    </form>      
</ion-view>

谢谢大家...

因为按钮会自动调用 ng-提交。

我相信这更多的是关于按钮的类型属性，而不是按钮标签本身。

我想默认值是提交，您的浏览器正在触发提交，因为您省略了（必需的？）类型属性。应该尝试<button type="button"></button>和<button type="submit"></button>一起

。

这些都是假设，但每次我想知道 Angular 如何处理 HTML 时，我总是选择语义，它就可以工作了。这种情况也不例外。

使用 ：

<input type="button" name="fota"  ng-click="getPhoto()">

因为<button>自动调用ng-submit。

<button type="button"..>

为我做了这个把戏。

在一个有角度的形式中，你只有一个按钮 - 这称为ng-submit。

如果要有多个类似按钮的元素，则需要设置div 或输入的样式使其看起来像按钮。

例如：

<div class="button button-block button-positive" ng-click="getPhoto()">
    <i class="icon ion-ios7-camera"> Photo</i>                      
</div>
这是我

当前的Ionic应用程序之一：

    <form name="myForm">
        <div class="item">
            <button class="button button-block button-positive icon-left ion-ios7-camera" ng-click="takePicture()">Camera</button>
        </div>
        <div class="item">
            <button class="button button-block button-positive icon-right ion-chevron-right" ng-click="update(obj)">Upload</button>
        </div>
    </form>

有两个javascript函数，一个用于拍照，另一个用于：

ft.upload($scope.mypicture, encodeURI(Urlforupload), uploadSuccess, uploadError, options);

以上传图片和一些表单字段。这些作品大部分都是从以下方面借来的：https://github.com/yafraorg/ionictests 谁比我更值得称赞。

相关文章：