Why is my Angular Form Control not giving the correct value?

Question

I have a form group set up thusly:

controls = {
    type: new FormControl(),
    attendanceDate: new FormControl(),
    status: new FormControl(),
  }
form = new FormGroup(this.controls);

This is the html for the type control:

<div id='form' [formGroup]="form" [appChangesPendingSection]="form.dirty">
      <div id="overlay" *ngIf="(this.showOverlay)"></div>
      <bi-dropdown-single i18n-label label="Type" formControlName="type" [required]="true">
        <bi-option *ngFor="let calendarItem of calendarItemTypes$ | async" [value]="calendarItem">{{calendarItem.name}}
        </bi-option>
      </bi-dropdown-single>
      <ng-container *ngIf="(isDuplicateAttendance$ | async) === true">
        <span i18n class="invalid-feedback d-block">There is already an attendance record for this type and date. If you
          need to
          replace this result, you will need to hide the old result first.</span>
      </ng-container>

I have an on change function:

  onAttendanceFormChanges(): void {
    this.subscriptions.push(this.controls.attendanceDate.valueChanges.subscribe(() => {
      this.subscriptions.push(this.$spService.clientAttendance$.subscribe(attendances => {
        if (this.controls.attendanceDate.value) {
            if (this.isAttendanceDuplicate(this.controls.attendanceDate.value, this.controls.type.value, attendances)) {
            this.isDuplicateAttendance$.next(true);
            this.controls.attendanceDate.setErrors({ 'duplicate': true });
          } else {
            this.isDuplicateAttendance$.next(false);
            this.controls.attendanceDate.setErrors(null);
          }
        }
      }));
    }));
  }

I call this.isAttendanceDuplicate, passing in the type value in the second parameter.

First two lines of that function:

  isAttendanceDuplicate(date: Date, type: number, attendances: Attendance[]): boolean {
    console.log("number " + type)

The response from the console.log is "number [object Object]", instead of something like "number 1", where 1 corresponds to the first item in the dropdown being selected. Why am I getting [object Object] instead?

Answer 1

In this

 <bi-option *ngFor="let calendarItem of calendarItemTypes$ | async" [value]="calendarItem">{{calendarItem.name}}
 </bi-option>

I should have done this

[value]="calendarItem.id"