Angular 2 ngSubmit läuft auch wenn es nicht sollte

Question

Ich baue eine ionic 3 App mit eckigen 2 und Typoskript. Ich habe ein Formular in der App, das für das Senden von Daten an unseren Server verantwortlich ist. Mein Problem ist jetzt, dass, wenn ich auf diese Schaltfläche klicken:

<button ion-button color="nice" small (click)="selectedDate = tomorrow">Morgen</button>

das Formular die Daten vorlegt. Was ist mein Fehler?

Dies ist die Form:

<form [formGroup]="reservateForm" (ngSubmit)="submitReservateForm()"> 
       <ion-row> 
       <ion-col col-12> 
        <p>Reserviere einen Tisch. Dein Tisch wird von dem Lokal noch bestätigt.</p> 
        <br> 
        <h3>Wie viele Leute kommen?</h3> 
        <ion-range min="1" max="16" mode="md" snaps="true" pin="true" step="1" formControlName="speople"> 
        <ion-label range-left>1</ion-label> 
        <ion-label range-right>16</ion-label> 
        </ion-range> 
        <br> 
       </ion-col> 
       <ion-col col-12> 
        <div class="fast-dial"> 
        <button ion-button color="nice" small (click)="selectedDate = tomorrow">Morgen</button> 
        <button ion-button color="nice" small (click)="selectedDate = theDayAfter">Übermorgen</button> 
        </div> 
       </ion-col> 
       </ion-row> 
       <ion-row> 
       <ion-col col-6> 
        <ion-item formControlName="sdate" ngDefaultControl (click)="showDatePicker()"> 
        {{selectedDate || "Kein Datum ausgewählt"}} 
        </ion-item> 
       </ion-col> 
       <ion-col col-6> 
        <ion-item formControlName="stime" ngDefaultControl (click)="showTimePicker()"> 
        {{selectedTime || "Keine Zeit gewählt"}} 
        </ion-item> 
       </ion-col> 
       </ion-row> 
       <ion-row> 
       <ion-col col-12> 
        <ion-item> 
        <ion-label stacked>Name, Vorname</ion-label> 
        <ion-input formControlName="sname"></ion-input> 
        </ion-item> 
       </ion-col> 
       <ion-col col-12> 
        <ion-item> 
        <ion-label stacked>Deine E-Mail</ion-label> 
        <ion-input formControlName="semail" type="email"></ion-input> 
        </ion-item> 
       </ion-col> 
       <ion-col col-12> 
        <ion-item> 
        <ion-label stacked>Telefon</ion-label> 
        <ion-input formControlName="sphone" type="number"></ion-input> 
        </ion-item> 
       </ion-col> 
       <ion-col col-12> 
        <ion-item> 
        <ion-label stacked>Bemerkungen</ion-label> 
        <ion-textarea formControlName="snotes"></ion-textarea> 
        </ion-item> 
       </ion-col> 
       <ion-col col-12> 
        <button type="submit" [disabled]="!reservateForm.valid" ion-button color="nice">Abschicken</button> 
       </ion-col> 
       </ion-row> 
      </form> 

Und dies ist der zugehörige Code TS:

constructor(public navCtrl: NavController, public modalCtrl: ModalController, public http: Http, public navParams: NavParams, private alertCtrl: AlertController, 
     private photoViewer: PhotoViewer, public platform: Platform, private datePicker: DatePicker, 
     private formBuilder: FormBuilder) { 
     this.reservateForm = this.formBuilder.group({ 
      speople: ['', Validators.required], 
      sdate: ['', Validators.required], 
      stime: ['', Validators.required], 
      sname: ['', Validators.required], 
      semail: ['', Validators.required], 
      sphone: ['', Validators.required], 
      snotes: ['', Validators.required] 

     }); 
     } 

submitReservateForm() { 
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); 
    let options = new RequestOptions({ headers: headers }); 

    let postParams = { 
     location_id: this.navParams.get('id'), 
     name: this.reservateForm.value.name, 
     email: this.reservateForm.value.email, 
     phonenumber: this.reservateForm.value.phone, 
     people: this.reservateForm.value.people, 
     comments: this.reservateForm.value.notes, 
     date:this.reservateForm.value.date, 
     time: this.myTime 
    } 

    this.http.post(AppSettings.BASE_URL + "api/postBooking", postParams, options) 
     .subscribe(data => { 
     console.log(data); 
     }, error => { 
     console.log(error); 
     }); 

    // Go back to first Tab 
    this.query = 'slide1'; 
    } 

Meine Vermutung ist, dass alle Knöpfe sind vorzulegen, damit die Funktion aufgerufen wird. Wie kann ich das lösen?

Answer 1

definieren die Art des button als button, die Standard-submit innerhalb eines Formulars ist

<button type="button" ion-button color="nice" small (click)="selectedDate = tomorrow">Morgen</button> 

Answer 2

Sie müssen type auf alle Ihre Tasten hinzuzufügen. Jede Taste, die nicht die submit Taste ist, sollte type="button" sein. Ihre submit Schaltfläche sollte type="submit" sein.