一種形式的兩個提交按鈕

Question

我想發送表單數據到服務器，但是我無法發送表單值和按鈕名稱來區分按鈕調用。

這裏是我的代碼：

<div class="widgets" id="top" hidden="true"> 
<ba-card title="Update User" baCardClass="with-scroll" > 
    <div class='row'> 
     <div class='col-md-6'> 
      <form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"> 
        <!-- FORM DATA --> 
        <button type="submit" value="update" [disabled]="!complexForm.valid" class="btn btn-success">Update User</button> 
       </div> 
       <div class="form-group"> 
        <button type="submit" value="delete" class="btn btn-success">Delete User</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</ba-card> 

我的後端呼籲提交表單：

updateUser(value: any) { 
    const _url 
    const headers = new Headers(); 
    headers.append('X--User', sessionStorage.getItem('username')); 
    headers.append('X--Token', sessionStorage.getItem('token')); 
    headers.append('X--AccessTime', sessionStorage.getItem('AccessTime')); 
    headers.append('Content-Type', 'application/json'); 
    const options = new RequestOptions({ headers: headers }); 

    return this.http.post(_url, value, options) 
     .subscribe((response: Response) => { 
     }); 
    } 




deleteUser(value: any) { 
    const _url 
    const headers = new Headers(); 
    headers.append('X--User', sessionStorage.getItem('username')); 
    headers.append('X--Token', sessionStorage.getItem('token')); 
    headers.append('X--AccessTime', sessionStorage.getItem('AccessTime')); 
    headers.append('Content-Type', 'application/json'); 
    const options = new RequestOptions({ headers: headers }); 

    return this.http.post(_url, value, options) 
     .subscribe((response: Response) => { 
     }); 
    } 

所以我的問題就出在這裏，我結合ngSubmit到UpdateUser兩個（complexForm.value），complexForm.value包含我想發送給支持的所有表單數據。我有更新用戶和刪除用戶都需要表單數據。如果我還將ngSubmit綁定到deleteUser（），它將只調用updateUser和deleteUser。

我看到了爲每個按鈕添加名稱的解決方案，但無法將按鈕值與表單值一起發送到後端（因爲我正在使用ngSubmit進行調用）。

謝謝。

Answer 1

修改您的形式是這樣的（改變按鈕輸入）：

<div class="widgets" id="top" hidden="true"> 
<ba-card title="Update User" baCardClass="with-scroll" > 
    <div class='row'> 
     <div class='col-md-6'> 
      <form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"> 
        <!-- FORM DATA --> 
        <input type="submit" name="action" [disabled]="!complexForm.valid" class="btn btn-success" value="Update User" 
       </div> 
       <div class="form-group"> 
        <input type="submit" name="action" value="Delete User" class="btn btn-success"> 
       </div> 
      </form> 
     </div> 
    </div> 
</ba-card> 

然後在您的打字稿側，

submitForm(value: any) { 
    switch(complexForm.action){ 
     case "Update User": return updateUser(value); 
     case "Delete User": return deleteUser(value); 
    } 
} 

它可能有一些小的調整，因爲我沒有什麼好（然而）在角度或打字稿，但我有關於如何web窗體工作的想法。