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

Question

I have a form with an action 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>

in my component.ts i have this:

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

I want to send to action url the updateusername and always send the value entered in ui.

How can I send the new value for and username input? I need to add additional values to username that user has been entered.

Possible duplicate of [How to set value to form control in Reactive Forms in Angular](https://stackoverflow.com/questions/55275025/how-to-set-value-to-form-control-in-reactive-forms-in-angular) — wentjun, Oct 28 '19 at 04:57

score 4 · Accepted Answer · answered Oct 28 '19 at 04:59

Judging from your template code, you're already using the ReactiveFormsModule.

You can get the value of the form using this.loginForm.value

Send your API call on the onSubmit method using HttpClient, like this:

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 - Send Form Data on Form Submit with updated form values

1 Answers1