[英]Two Submit Buttons for One Form
我想将表单数据发送到服务器,但是无法发送表单值和按钮名称来区分按钮调用。
这是我的代码:
<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包含了我要发送到支持的所有表单数据。 我有同时需要表单数据的Update用户和Delete用户。 如果我还将ngSubmit绑定到deleteUser(),它将只调用updateUser和deleteUser。
我看到了为每个按钮添加名称的解决方案,但是我无法将按钮值和表单值一起发送到后端(因为我正在使用ngSubmit进行调用)。
谢谢。
像这样修改表单(将按钮更改为输入):
<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表单的工作方式有一些想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.