title: Angular - Send Form Data on Form Submit with updated form values
body: <p>I have a form with an action url</p>
  
  <pre><code>&lt;form 
    ngNoForm 
    id="login-form" 
    [formGroup]="loginForm" 
    (submit)="onSubmit()" 
    [action]='actionUrl' 
    method='POST'&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="label-input" for="email"&gt;username&lt;/label&gt;
      &lt;input 
        type="text" 
        formControlName="username" 
        name="username" 
        id="username" 
        [ngModel]="username" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="label-input" for="password"&gt;Password&lt;/label&gt;
      &lt;input 
        [type]="password" 
        formControlName="password" 
        name="password" 
        class="form-control" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>in my component.ts i have this:</p>
  
  <pre><code>onSubmit() {
    this.username = 'updatedusername';
    this.testFormElement.nativeElement.submit();
  }
  </code></pre>
  
  <p>I want to send to action url the <code>updateusername</code> and always send the value entered in ui.</p>
  
  <p>How can I send the new value for and username input? I need to add additional values to username that user has been entered.</p>