javascript - Angular 2 ngSubmit 即使不应该运行也会运行

Question

我正在使用 Angular 2 和 TypeScript 构建一个 ionic 3 应用程序。我的应用程序中有一个表单，负责将数据发送到我们的服务器。我现在的问题是，当我单击此按钮时:

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

表单提交数据。我的错误是什么？

这是表格:

 <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>

这是相关的 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';
  }

我的猜测是所有按钮都是提交按钮，因此该函数被调用。我该如何解决这个问题？

Answer 1

定义button类型为button，默认为表单内的submit

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