一个表单有两个提交按钮 [英] Two Submit Buttons for One Form

问题描述

我想将表单数据发送到服务器，但是我无法发送表单值和按钮名称来区分按钮调用.

I'd like to send form data to a server however I can't send the form value and the button name to distinguish between the button call.

这是我的代码:

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

我的后端要求提交表单:

My Backend call for submit form:

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.

So my problem lies here, I bind ngSubmit to updateUser(complexForm.value), complexForm.value contains all the form data I want to send to the backed. I have Update user and delete user that both require the form data. If I also bind ngSubmit to deleteUser() it will just call both updateUser and deleteUser.

我看到了为每个按钮添加名称的解决方案，但是我无法将按钮值和表单值一起发送到后端(因为我正在使用ngSubmit进行调用).

I saw a solution of adding a name to each button, however I couldn't send the button value to the backend along with the form value (since I'm doing the call with ngSubmit).

谢谢.

推荐答案

像这样修改表单(将按钮更改为输入):

Modify your form like this (change the buttons to inputs):

<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表单的工作原理有所了解.

It may have some minor tweaks because I'm no good (yet) at angular or typescript, but I have ideas about how web forms work.

这篇关于一个表单有两个提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！