title: Angular ReactiveFrom subscribe on valueChanges gives [object Object]
body: <p>I have a small angular webform with only 1 dropdown field which is declared in my component.html as a <code>formControlName="serviceName".</code></p>
  
  <p>Dropdown details:</p>
  
  <pre><code>    &lt;div class="dropdown"&gt;
        &lt;label for="serviceName"&gt;Select the Service&lt;/label&gt;
        &lt;select class="form-control" formControlName="serviceName" id="serviceName"&gt;
          &lt;option *ngFor="let service of srvNames; let i = index" [value]="service"&gt;{{ service.ServiceName }}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In my component I have an array declared  <code>srvNames: any[];</code> and this array is being populated via an http call to a service.</p>
  
  <p>Users can use the dropdown and select different values, the values are shown in my webpage.
  With get('serviceName').valueChanges and subscribe I want to keep track of the changes.</p>
  
  <pre><code>this.servicesForm.get('serviceName').valueChanges
        .subscribe(
          (value) =&gt; {
            console.log(value);
          }
        );
  </code></pre>
  
  <p>When I console.log the value from the subscribe I see that I am getting back [object Object]</p>
  
  <p>But When I console.log my array I see the values:</p>
  
  <pre><code>0:{ServiceName: "PhdTimeSeriesVS"}
  1:{ServiceName: "Product"}
  length:2
  __proto__:Array(0)
  </code></pre>
  
  <p>Can somebody help me?
  Thanks,
  Lino</p>