title: Angular 6 reactive forms select component not selecting the option from patchValue
body: <p>I am working on wrapping a select element as a component (called <code>select-ddl</code>) with additional functionality.  I didn't get around to the "additional functionality" before I discovered that the correct option isn't being selected automatically by the FormGroup when calling setValue or patchValue.  </p>
  
  <p>What really doesn't make sense to me is that validation is working, and if I select a value in the drop-down, calling <code>this.form.value</code> returns the right result with <code>companyId</code> set.  I believe that means the <code>SelectControlValueAccessor</code> is being correctly setup by Angular to wire up the FormControl to the DOM element.</p>
  
  <p><strong>person-edit.component.ts contains:</strong></p>
  
  <pre><code>id = 0;
  form: FormGroup;
  record: PersonViewModel = new PersonViewModel();
  companies: NameViewModel[] | undefined;
  
  constructor(
    private dataService: PeopleService,
    private route: ActivatedRoute,
    private fb: FormBuilder) {
    this.form = this.fb.group({ companyId: [null, [Validators.required]] });
  }
  
  ngOnInit() {
    this.route.params.subscribe((params) =&gt; {
      this.id = Number(params.id)
      this.dataService.getRecord(this.id).subscribe(result =&gt; {
          this.record = result;
          this.form.patchValue(this.record);
        });
    this.dataService.getCompanies().subscribe(result =&gt; this.companies = result);
  }
  </code></pre>
  
  <p><strong>person-edit.component.html contains:</strong></p>
  
  <pre><code>&lt;select select-ddl id="companyIdInput" formControlName="companyId" [items]="companies"&gt;&lt;/select&gt;
  </code></pre>
  
  <p><strong>select-ddl.component.html contains:</strong></p>
  
  <pre><code>@Component({
    selector: "select[select-ddl]",
    template: `&lt;option *ngFor="let item of items" value="{{item.id}}"&gt;{{item.name}}&lt;/option&gt;`,
  })
  export class SelectDdlComponent implements OnChanges {
    @Input() items: NameViewModel[] | undefined;
  }
  </code></pre>
  
  <p>One thing I've noticed is that the companies list loads after the record.  So the options are being created after patchValue was already called on the form.  This wasn't a problem when it was just a normal select in the person-edit.component, but now that I'm using the new <code>select-ddl</code>, it's broken.  Also, if I force the companies to load before the record, the problem goes away.</p>
  
  <p>I tried calling <code>this.form.get("companyId")!.setValue(this.record.companyId)</code> inside the <code>getCompanies().subscribe</code> statement, after this.companies is set.  It didn't help.  However, at that time, the option elements haven't been asynchronously created, so I expected that.</p>
  
  <p>I can work around the problem by passing <code>this.record.companyId</code> as an input to the select-ddl, and then putting this on the option element: <code>[attr.selected]="item.id === itemId ? '' : null"</code>.  But that's a hack, and I want it to work correctly using the built-in, under-the-hood tooling seemlessly.</p>
  
  <p><strong>UPDATE</strong>: I'm reasonably sure the problem has something to do with the <a href="https://github.com/angular/angular/blob/master/packages/forms/src/directives/select_control_value_accessor.ts" rel="nofollow noreferrer">NgSelectOption</a> directive, which seems to bind the options to the select to solve exactly this need.  However, I have no idea (a) how to diagnose why it wouldn't be working in this instance, or (b) how to get it working as it's designed to.</p>