title: Why can't I set a select option programmatically when using an object on a Reactive Form in Angular
body: <p>I'd like to figure out because I can't set the select option of a Reactive Form using the following typescript code:</p>
  <p><strong>That's my class</strong></p>
  <pre><code>export class SlotStatusTypes {
      id: number;
      description: string;
  }
  </code></pre>
  <p><strong>That's my component template</strong></p>
  <pre><code>&lt;select id=&quot;subject&quot; formControlName=&quot;subject&quot; class=&quot;form-control&quot;
     aria-describedby=&quot;subject&quot;&gt;
     &lt;option *ngFor=&quot;let statusType of slotStatusTypesList&quot; [ngValue]=&quot;statusType&quot;&gt;
        {{statusType.description}}
     &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p><strong>And that's in my component:</strong></p>
  <pre><code>slotStatusTypesList: SlotStatusTypes[] = [];
  </code></pre>
  <blockquote>
  <p>The slotStatusTypesList variable is filled in by another HTTP GET call.</p>
  </blockquote>
  <p>Here I initialize my form:</p>
  <pre><code>ngOnInit(): void {
     this.slotForm = new FormGroup({
        ...
        subject: new FormControl(null, [
          Validators.required
        ]),
        ...
     });
  }
  </code></pre>
  <p>Within a callback function is filled in the <em>slotForm</em> form among which the subject field after finding the value corresponding as you can see below:</p>
  <pre><code>let statusTypeFound: SlotStatusTypes = this.slotStatusTypesList.find(r =&gt; r.id === slotPlanning.statusTypeId);
  
  this.slotForm.setValue({
     ...
     subject: statusTypeFound,
     ...
  });
  </code></pre>
  <p><em>Up to now it all works.</em></p>
  <p>Now, I want to set an identical object of type SlotStatusTypes in the <em>slotForm</em> form instead of looking for an object by a list, see below:</p>
  <pre><code>let slotStatusType: SlotStatusTypes = {
     id: slotPlanning.id, //id: 1
     description: slotPlanning.description //description: &quot;Available&quot;
  };
  
  this.slotForm.setValue({
     ...
     subject: slotStatusType,
     ...
  });
  </code></pre>
  <p>At this point the <em>slotForm</em> form select isn't set with the selected value as I expected.
  <br/>
  Why doesn't it work in that case?<br/></p>