时间戳

首页 > 解决方案 > Angular - 使用更新的表单值在表单提交上发送表单数据

angular - Angular - 使用更新的表单值在表单提交上发送表单数据

问题描述

我有一个带有操作 url 的表单

<form 
  ngNoForm 
  id="login-form" 
  [formGroup]="loginForm" 
  (submit)="onSubmit()" 
  [action]='actionUrl' 
  method='POST'>
  <div class="form-group">
    <label class="label-input" for="email">username</label>
    <input 
      type="text" 
      formControlName="username" 
      name="username" 
      id="username" 
      [ngModel]="username" />
  </div>
  <div class="form-group">
    <label class="label-input" for="password">Password</label>
    <input 
      [type]="password" 
      formControlName="password" 
      name="password" 
      class="form-control" />
  </div>
</form>

在我的 component.ts 我有这个：

onSubmit() {
  this.username = 'updatedusername';
  this.testFormElement.nativeElement.submit();
}

我想发送到操作 urlupdateusername并始终发送在 ui 中输入的值。

如何发送新值和用户名输入？我需要向已输入用户的用户名添加其他值。

标签： angularangular-reactive-formsangular-httpclientreactive-forms

解决方案

从您的模板代码来看，您已经在使用ReactiveFormsModule.

您可以使用获取表单的值this.loginForm.value

使用发送您对onSubmit方法的 API 调用HttpClient，如下所示：

onSubmit() {
  this.http.post('your-api-url-here', this.loginForm.value)
    .subscribe(res => console.log(res));
}

这是您参考的工作示例 StackBlitz。

推荐阅读