Angular 2 ngSubmit即使不應該運行

Question

我正在構建一個帶有角度爲2和打字的離子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> 

Answer 2

您需要添加type所有按鈕裏面。任何按鈕不是的submit按鈕應該是type="button"。您的submit按鈕應該是type="submit"。