0

I have a input text with two buttons inside ionic footer. one button is attached to form submit. however, if i click the another button it also fires the submit button.

the code looks like:

<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>

so in this case if i click the microphone button i see the sendChatMessage() is fired as well.

Vik
  • 8,721
  • 27
  • 83
  • 168
  • For why this is the case see: https://stackoverflow.com/questions/3314989/can-i-make-a-button-not-submit-a-form – mc01 Dec 07 '17 at 18:55

1 Answers1

6

add type="button" in your all non submit buttons

 <button ion-button type="button" (click)="listenForSpeech()" clear><ion-icon name="microphone" isActive={{microphoneActive}} style="zoom:1.0;"></ion-icon></button>
CharanRoot
  • 6,181
  • 2
  • 27
  • 45