Form -> ion-item-sliding > button (click) firing form submit

Ionic Framework ionic-v3
1

let me explain the Topic.

i have a formControlled form with a sliding item inside

    <ion-list>
      <ion-item-sliding *ngFor="let item of medListMedications; let i = index">
        <ion-item>
          <ion-row>
            <ion-col col-11>
                {{item.LBL_NME}} <br>
                <p> ({{item.DRUG_TYPE}}) Quantity: {{item.QTY}}</p>
            </ion-col>
            <ion-col col-1 align-items-end>
              ...
            </ion-col>
          </ion-row>
        </ion-item>
        <ion-item-options">
          <button
            ion-button
            color="danger"
            (click)="onRemoveMedication(i)">
            <ion-icon name="trash"></ion-icon>
            Delete
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>

this worked fine until i added a second option

        <ion-item-options  side="left">
          <button ion-button (click)="editMedicationQty(item)">
            <ion-icon name="build"></ion-icon>
            Edit
          </button>
        </ion-item-options>
        <ion-item-options  side="right">
          <button
            ion-button
            color="danger"
            (click)="onRemoveMedication(i)">
            <ion-icon name="trash"></ion-icon>
            Delete
          </button>

if i click on the delete button all is good
if i cllick on the added edit button it fires the popup and the form submit

i added a boolean var to check in onSubmit

onSubmit() {
    if (!this.blockSubmit) {

it still fires both, but, the boolean stops submit code from running. so its a workaround

Am I missing something.

Yes i have AlertControler imported
this page that house all this is a standard page called with

this.navCtrl.push(
2

Pass the event ($event) in the html to your TS function, and call stopPropagation(). E.g.:

(click)=onRemoveMedication(i, $event)

In TS:

onRemoveMedication(i,ev){
  ev.stopPropagation();
  // your logic here
}
3

Thanks, so much for you quick response.
But it had no effect>

4

Then I would add type="button" to the button tag as it must be interpreted as a submit button.

1 Like
5

Ding Ding, we have a winner, thanks so much, learned lots from this.