Ionen Toggle sendet das Formular

Question

Ich habe den folgenden einfachen 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"); 
    } 
} 

Das Problem ist, dass, wenn ich auf dem Toggle klicken Sie auf die Form der Funktion einreichen aufruft.

Hat jemand eine Lösung für dieses Problem?

Answer 1

Inbetriebnahme der Funktionsaufruf in der submit Taste mein Problem gelöst:

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

}

Answer 2

In der Tat haben Sie Zwei-Wege-Bindung auf der toggle Eigenschaft und Sie binden Ihre ngIf s auf dieser Eigenschaft. Dies bedeutet, dass die Aktualisierungen automatisch berücksichtigt werden, ohne dass das Formular gesendet werden muss.

Um Updates nur beim Senden zu berücksichtigen, müssen Sie eine andere Eigenschaft verwenden. So etwas Ähnliches:

@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; // <-------- 
    } 
}