Ion-toggle submits form

Ionic Framework ionic-v3
1

I have the following simple code:

@Page({
    template: `
      <ion-content>
        <form (submit)="submit()">
          <ion-item>
              <ion-label>Some Toggle</ion-label>
              <ion-toggle [(ngModel)]="toggle"></ion-toggle>
          </ion-item>

          <div *ngIf="toggle">some content 1</div>
          <div *ngIf="!toggle">some content 2</div>

            <button type="submit">Submit</button>
        </form>
      </ion-content>
    `,
})
export class TestPage{

  submit(){
    console.log("form submit");
  }
}

The problem is that whenever I click on the toggle the form calls the submit function.

Does anyone have a solution to this problem?

2

This seems to be a bug in Ionic 2.

As a workaround you can try to submit the form only when the submit button is clicked, i.e.:

<button type="submit" (click)="submit()">Submit</button>

I created a new issue about it:

3

The issue is already fixed so this should work as expected in beta.5.