ion-toggle 提交表单

Question

我有以下简单代码：

@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");
  }
}

问题是每当我点击开关时，表单都会调用提交功能。

有人能解决这个问题吗？

Answer 1

事实上，您在 toggle 属性上进行了双向绑定，并且在属性上绑定了您的 ngIf。这意味着无需提交表单即可自动考虑其更新。

要仅在提交时考虑更新，您需要使用另一个属性。类似的东西：

@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="panelToggle">some content 1</div> <-------
        <div *ngIf="!panelToggle">some content 2</div>

        <button type="submit">Submit</button>
      </form>
    </ion-content>
    `,
})
export class TestPage{
  submit() {
    console.log("form submit");
    this.panelToggle = this.toggle; // <--------
  }
}

Answer 2

将提交函数调用放在提交按钮中解决了我的问题：

@Page({
    template: `
      <ion-content>
        <form>
          <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" (click)="submit()">Submit</button>
        </form>
      </ion-content>
    `,
})
export class TestPage{

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

}

ion-toggle 提交表单

ion-toggle submits the form

android

ionic-framework

ionic2

angular