ион-тумблер отправляет форму

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

Ввод вызова на функцию представить в кнопку отправки решить мою проблему:

@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

На самом деле у вас есть двусторонняя привязка на имущество 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; // <-------- 
    } 
}