How do I populate a select form field in an Angular Reactive Form?

Use the 'this.timeEntry.payCategories' in the template to build the options, using ngFor

<option *ngFor="let payCategory of timeEntry.payCategories" [value]="payCategory.payCategoryId">{{ payCategory.description }}</option>

When building the Reactive Form, the first parameter in the FormControl should be the value from the select, in other words, the selected option. Example:

return this.fb.group( {
      payCategories: [ 2, [ Validators.required ] ]
    } );

Will match the option with value equals 2.

Clay, you need choose if you want a FormArray of FormGroup or a FormArray of FormControls.

A FormArray of FormGroups

  myForm=new FormGroup({
    myArray:new FormArray([
    new FormGroup({
      prop1:new FormControl('',Validators.required),
      prop2:new FormControl('',Validators.required)
    })
  ])
  })

<!--your form--->
<form [formGroup]="myForm">
    <!--a div with formArrayName--->
    <div formArrayName="myArray">
        <!--a div that iterate over "controls" and has [formGroupName]-->
        <div *ngFor="let group of myForm.get('myArray').controls;
                  let i=index" [formGroupName]="i">
            <!--your input using formControlName-->
            <input formControlName="prop1">
            <input formControlName="prop2"/>
         </div>
    </div>
</form>
{{myForm?.value|json}}
//Some like { "myArray": [ { "prop1": "", "prop2": "" } ] } 

A FormArray of FormControls

  myForm2 = new FormGroup({
    myArray: new FormArray([
      new FormControl('', Validators.required),
      new FormControl('', Validators.required)
    ])
  })

<!--your form--->
<form [formGroup]="myForm2">
    <!--a div with formArrayName--->
  <div formArrayName="myArray">
  <!--a div that iterate over "controls"-->
  <div *ngFor="let group of myForm2.get('myArray').controls;let i=index">
      <!--a unique element using [formControlName]-->
      <input [formControlName]="i">
  </div>
  </div>
</form>
{{myForm2?.value|json}}
//will be like  { "myArray": [ "", "" ] }

NOTE: I use directy new FormGroup and new FormArray , not FormBuilder. This avoid the need of inject the FormBuilder and, if you want, change the "change detection", but in sintax it's not much the difference

NOTE2: there are more differents ways to refered to a control in an array but I think this are the more clerest.

TIPs for make a form

1. Always beging with {{form?.value|json}}. A formGroup exist independlty of the "inputs"
2. we beging write <form *ngIf="form" [formGroup]="myForm"></form>
3. At first use simple inputs
4. Always need know what we want to get in form.value

Update About select. A select it's a input, only need give the formControlName to the "select". Well a select need an array of objects to show the options. If our array of object has two properties, "value" and "text" generally we use some like:

//If our arrayForm is an ArrayForm of FormGroups
<select formControlName="prop1">
  <options *ngFor="let item of options" [value]="item.value">
      {{item.text}}
  </option> 
</select>
//If our arrayForm is a Array of FormControls
<select [formControlName]="i">
  <options *ngFor="let item of options" [value]="item.value">
      {{item.text}}
  </option> 
</select>

First, take account there NO [selected] anywhere: it's not necesary. If we can selected a value we'll give value to the FormControl.

When we are using ReactiveForm, usually we subscribe to changeValue propertie of the control in spite of use (change), and we must be carefully: In options we can use [value] or [ngValue]. but the value can be a simple variable (a string or a number) or a complex object. If we are not using dropdop in cascate, the normal it's use only a simple variable.

Update I made changes and I think I am close because I see the data dumped to the screen via {{timecardForm?.value|json}}

I am receiving the control.registerOnChange is not a function error, which leads me to believe I have something referenced incorrectly. Here is my updated code...

<div class="col-2">
          <div formArrayName="payCategoriesTracked">
            <div *ngFor="let payCategory of payCategoriesTracked.controls; let i=index">
              <mat-form-field>
                <mat-label>Pay Category</mat-label>
                <mat-select [formControlName]="i"
                            (change)="onRecordUpdated(timeCard, timecardDet)"
                            [ngClass]="{'is-invalid': payCategoriesMessage }">
                  <mat-option *ngFor="let payCategory of payCategories"
                              [ngValue]="payCategory">
                    {{payCategory.description}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

The data dump is as follows...

"payCategoriesTracked": [ { "payCategories": [ { "payCategoryId": 1, "description": "Converted Data ",...etc.