I've got an Angular 6, Reactive Forms project that connects to an ASP.NET Web Api 2 / MS SQL Server 2017 back end. I am in the middle of wiring up the front end and have come across a situation I have not yet encountered and can't find examples of how to accomplish: 

[Nested FormGroups](https://angular.io/guide/reactive-forms#nested-formgroups) whose object is represented by a `select` element. What I have so far does not error and it seemingly selects the correct item in the drop down upon load. However, upon selection, it *only* updates one field and not the whole object.

I *think* I need to use `formGroupName="company"` to tell `registerOnChange()` what control to look for and then some form of `formControlName="..."`, but I don't understand how do so with the `select` or `option` elements to achieve what I'm looking for. I need a selection to update the entire object, both the id and name properties.

***[Click here to view the StackBlitz editor/demo](https://stackblitz.com/edit/angular-kfzq2b)***

### site-edit.component.html

```html
...
<form class="form-horizontal" novalidate (ngSubmit)="save()" [formGroup]="siteForm">
  <fieldset>
    ...
    <div class="form-group" formGroupName="company">
      <label class="col-md-2 control-label" for="companyId">Company</label>
      <div class="col-md-8">
        <select id="companyId" class="form-control" formControlName="company">
          <option *ngFor="let company of companies" [ngValue]="company.name">
            {{ company.name }}
          </option>
        </select>
      </div>
    </div>
    ...
  </fieldset>
</form>

```

### site-edit.component.ts

```js
siteForm: FormGroup;

// TODO: refactor to use http Company Service instead
companies: Company[] = [
  { id: 1, name: 'Company 1'},
  { id: 2, name: 'Company 2'},
  { id: 3, name: 'Company 3'}
];
site: Site;

constructor(private fb: FormBuilder,
            private siteService: SiteService) { }

ngOnInit(): void {
  this.siteForm = this.fb.group({
    ...
    company: this.fb.group({
      id: null,
      name: ''
    }),
    ...
  });
}

getSite(id: number): void {
  this.siteService.getSite(id)
    .subscribe(site => this.onSiteRetrieved(site));
}

save(): void {
  if (this.siteForm.dirty && this.siteForm.valid) {
    // copy form values over the site object values
    const s = Object.assign({}, this.site, this.siteForm.value);

    // simulate call to save service
    console.log('Saved: ' + JSON.stringify(s));
  }
}

onSiteRetrieved(site: Site): void {
  // clear all the state flags (dirty, touched, etc.)
  if (this.siteForm) {
    this.siteForm.reset();
  }
  this.site = site;

  // update the data on the form
  this.siteForm.setValue({
    ...
    company: {
      id: this.site.company.id,
      name: this.site.company.name
    },
    ...
  });
}  

... more

```