Angular material: Mat-select put formgroup as value

Question

I have an object contentType

export interface ContentType {
  code: string;
  label: string;
}

I want to select this object as value of my mat-select, is a formgroup inside the form, the binding not works. If y put formControl=contentType i have an error because this is nos a formControl is a formGroup.

this.formGroup = this.formGroup.group({
    contentType: this.formGroup.group(),
 });


<div form="formGroup">
     <mat-form-field>
        <mat-select [formGroupName]="'contentType'">
          <mat-option [(value)]="contentType" *ngFor="let contentType of contentTypes$ | async"> 
             {{contentType.label}}
          </mat-option>
       </mat-select>
     </mat-form-field>
</div>

What can i do to binding well the contentType, thanks.

Havald Havald · Accepted Answer · 2020-09-11T11:08:34

FormGroups are only used to "group" formcontrols. A formcontrol can take any value wether it's a number/string or a complex object.

In your case a simple formControl for the ContentType object should be enough and you can use formControlName inside your template combined with the [formGroup] directive:

const fb = new FormBuilder();
this.formGroup = fb.group({
    contentType: defaultValue | null,
 });


<div [formGroup]="formGroup">
     <mat-form-field>
        <mat-select [formControlName]="'contentType'">
          <mat-option [value]="contentType" *ngFor="let contentType of contentTypes$ | async"> 
             {{contentType.label}}
          </mat-option>
       </mat-select>
     </mat-form-field>
</div>

Angular material: Mat-select put formgroup as value

1 Answers