Question

我有一个带有操作网址的表单

<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();
}

我想将updateusername的网址发送给行动网址，并始终发送在ui中输入的值。

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

Answer 1

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

您可以使用this.loginForm.value

获取表单的值

使用onSubmit在HttpClient方法上发送API调用，如下所示：

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

这是您推荐的Working Sample StackBlitz。

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

1 个答案: