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 ивсегда отправлять значение, введенное в пользовательском интерфейсе.

Как я могу отправить новое значение и ввод имени пользователя? Мне нужно добавить дополнительные значения к имени пользователя, чтобы пользователь был введен.

Answer 1

Судя по вашему шаблонному коду, вы уже используете ReactiveFormsModule.

. Вы можете получить значение формы, используя this.loginForm.value

Отправьте вызов API на onSubmit метод с использованием HttpClient, например:

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

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.