Currently, I am working on developing an Ionic 3 application with Angular 2 and TypeScript. In the app, there is a form that is responsible for sending data to our server. The issue I am facing is that whenever I click on the following button:

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

the form automatically submits the data. Can anyone point out what mistake I might be making?

Here is the form structure:

 <form [formGroup]="reservateForm" (ngSubmit)="submitReservateForm()">
              <ion-row>
                <ion-col col-12>
                  <p>Reserve a table. Your reservation will be confirmed by the restaurant.</p>
                  <br>
                  <h3>How many people are coming?</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">Tomorrow</button>
                    <button ion-button color="nice" small (click)="selectedDate = theDayAfter">Day after Tomorrow</button>
                  </div>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-6>
                  <ion-item formControlName="sdate" ngDefaultControl (click)="showDatePicker()">
                    {{selectedDate || "No date selected"}}
                  </ion-item>
                </ion-col>
                <ion-col col-6>
                  <ion-item formControlName="stime"  ngDefaultControl (click)="showTimePicker()">
                    {{selectedTime || "No time chosen"}}
                  </ion-item>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-12>
                  <ion-item>
                    <ion-label stacked>Full Name</ion-label>
                    <ion-input formControlName="sname"></ion-input>
                  </ion-item>
                </ion-col>
                <ion-col col-12>
                  <ion-item>
                    <ion-label stacked>Your Email</ion-label>
                    <ion-input formControlName="semail" type="email"></ion-input>
                  </ion-item>
                </ion-col>
                <ion-col col-12>
                  <ion-item>
                    <ion-label stacked>Phone Number</ion-label>
                    <ion-input formControlName="sphone" type="number"></ion-input>
                  </ion-item>
                </ion-col>
                <ion-col col-12>
                  <ion-item>
                    <ion-label stacked>Comments</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">Submit</button>
                </ion-col>
              </ion-row>
            </form>

Here is my TypeScript code related to this functionality:

    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';
  }

I suspect that all buttons in the form are being treated as submit buttons which triggers the function. How can I go about addressing this issue?