离子2角度:按钮单击里面的页脚也调用提交按钮

Question

我有一个输入文本,在离子页脚内有两个按钮.一个按钮附加到表单提交.但是,如果我点击另一个按钮,它也会触发提交按钮.

代码如下:

<ion-footer padding>
    <form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
        <button ion-button (click)="listenForSpeech()" clear><ion-icon name="microphone" isActive={{microphoneActive}} style="zoom:1.0;"></ion-icon></button>
        <ion-input type="text" #sendInput formControlName="messageInput" placeholder="start typing..."></ion-input>
        <ion-buttons end>
            <button ion-button clear type="submit" [disabled]="chatForm.controls['messageInput'].value === ''"><ion-icon name="ios-send" style="zoom:2.0;"></ion-icon></button>
        </ion-buttons>
    </form>
</ion-footer>

所以在这种情况下如果我点击麦克风按钮,我也会看到sendChatMessage()被激活.

Answer 1

添加 type="button"所有非提交按钮

 <button ion-button type="button" (click)="listenForSpeech()" clear><ion-icon name="microphone" isActive={{microphoneActive}} style="zoom:1.0;"></ion-icon></button>