一种形式的两个提交按钮

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窗体工作的想法。