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提交表单

2 个答案: