title: Angular FormControl objects are able to accept input values of any type, or are restricted to typescript primitive types?
body: <p>I am using FormControl objects in a FormGroup to create a reactive form in Angular. There is no problem when I pass primitive arguments as a value of an HTML input select control. However, when I pass an object of a self-defined class, the value in the FormControl is reduced to [object Object]. </p>
  
  <p>The system I am working in includes:
  Angular CLI: 7.1.4; 
  Node: 10.15.0; 
  Angular: 7.1.4; 
  rxjs      6.3.3; 
  typescript 3.1.6; 
  webpack  4.23.1; 
  Linux rdz1 4.15.0-43-generic #46-Ubuntu SMP Thu Dec 6 14:45:28 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl } from '@angular/forms';
  
  @Component({
      selector: 'app-header-notes',
      templateUrl: './header-notes.component.html',
      styleUrls: ['./header-notes.component.css']
  })
  
  export class HeaderNotesComponent implements OnInit {
      ndcForm = new FormGroup({
          noteType: new FormControl(''),
          noteDate: new FormControl(''),
          noteFor: new FormControl(''),
          noteTo: new FormControl(''),
          noteDetail: new FormControl(''),
          noteDetailVal: new FormControl(''),
          noteChkRefInvoice: new FormControl('')
      });
  
      ngOnInit() { this.onChanges(); }
  
      onChanges(): void{
          this.ndcForm.valueChanges
          .subscribe( val =&gt; console.log(val))
      }
  }
  </code></pre>
  
  <p>The console shows something like:
  {noteType: "credit", noteDate: "2019-01-01", noteTo: [object Object], ... }</p>
  
  <p>I am passing an object {param1: val1, parm2: val2} to "noteTo" , so I would expect to watch this value in the console, however it is showing [object Object]. It looks like if the object has been stringified.</p>