title: Angular - pass additional form data to the server
body: <p>I have a basic Angular form with <code>prod_name</code>, <code>prod_desc</code>, <code>prod_price</code>, those of course I want to send to the server when form is submitted.  </p>
  
  <p>However I want to send additional peace of data and I don't want to make hidden input field for that.</p>
  
  <p>So stripped version of form looks something like this:  </p>
  
  <pre><code>&lt;form [formGroup]="productForm" (ngSubmit)="onFormSubmit(productForm.value)"&gt;
    &lt;mat-form-field class="example-full-width"&gt;
      &lt;input matInput placeholder="Product Name" formControlName="prod_name"
             [errorStateMatcher]="matcher"&gt;
  
    &lt;/mat-form-field&gt;
  
   &lt;!-- Additional two form fields omitted for clarity --&gt;
  
    &lt;div class="button-row"&gt;
      &lt;button type="submit" [disabled]="!productForm.valid" mat-flat-button color="primary"&gt;&lt;mat-icon&gt;save&lt;/mat-icon&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Basically it invokes <code>onFormSubmit()</code> and passes to it <code>productForm.value</code>.</p>
  
  <p>This is what controller looks like, stripped with only necessary data for clarity:  </p>
  
  <pre><code>@Component({
  //...
  })
  export class ProductAddComponent implements OnInit {
  
    productForm: FormGroup;
    updated_at: Date = null;
  
    constructor(private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }
  
    ngOnInit() {
      this.productForm = this.formBuilder.group({
        'prod_name' : [null, Validators.required],
        'prod_desc' : [null, Validators.required],
        'prod_price' : [null, Validators.required]
      });
    }
  
    onFormSubmit(form: NgForm) {
      // Here I want to add current date as well to the form data before sending it
      this.api.addProduct(form)
        .subscribe(res =&gt; {
            let id = res.id;
            this.router.navigate(['/product-details', id]);
        }, err =&gt; {
            console.log(err);
        });
    }
  
  }
  </code></pre>
  
  <p>Within <code>onFormSubmit()</code> function I want to pass a current date to the server as well.<br>
  Hidden field in the form template is not the option.<br>
  I want to do it in the <code>onFormSubmit()</code> function before calling the service but I'm stuck.  </p>
  
  <p>I would appreciate help as to how basically set additional data along with the form data, for example date and sent it to the server.</p>