mat-selection-list in reactive form

Question

Has anyone successfully used mat-selection-list with Angular's reactive forms. When I try to use it I am getting

values.map is not a function

below is my html code:

<div class="form-group" [formGroup]="activityForm">
      <mat-selection-list formControlName="activity" (selectionChange)="onActivitySelected($event)">
        <mat-list-option *ngFor="let act of activities"
                         [value]="act.id">
          {{act.name}}
        </mat-list-option>
      </mat-selection-list>
</div>

and this is my form definition:

this.formGroup1 = this.fb.group({
      destinationForm: this.fb.group({
        destination: [null, Validators.required]
      }),
      activityForm: this.fb.group({
        activity: [[''], Validators.required]
      }),
      travellerForm: this.fb.group({
        firstName: ['', Validators.required],
        lastName: '',
      })
});

could someone help with this issue please

stack trace:

Answer 1

this.formGroup1 = this.fb.group({
      destinationForm: this.fb.group({
        destination: [{value: null, disabled: false}, [Validators.required]]
      }),
      activityForm: this.fb.group({
        activity: [{value: '', disabled: false}, [Validators.required]]
      }),
      travellerForm: this.fb.group({
        firstName: [{value: '', disabled: false}, [Validators.required]]
        lastName: [{value: '', disabled: false}]
      })
});