Angular

Question

我有一个带有操作的表单 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();
}

我想发送 url updateusername 并始终发送在 ui 中输入的值。

如何发送用户名输入的新值？我需要为用户输入的用户名添加额外的值。

Answer 1

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

您可以使用this.loginForm.value

获取表单的值

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

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

Here's a Working Sample StackBlitz for your ref.

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

Angular - Send Form Data on Form Submit with updated form values

angular-reactive-forms

angular-httpclient