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 — wentjun
– wentjun, Commented Oct 28, 2019 at 4:57

SiddAjmera · Accepted Answer · 2019-10-28 04:59:13Z

5

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.

answered Oct 28, 2019 at 4:59

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related