Блог

У меня есть объект ContentType

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

Я хочу выбрать этот объект в качестве значения моего mat-select, это formgroup внутри формы, привязка не работает.
Если я помещаю FormControl=ContentType, у меня возникает ошибка, потому что это не FormControl является 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>
  

Что я могу сделать, чтобы хорошо привязать ContentType, спасибо.

FormGroups используются только для «группировки» formcontrols. Formcontrol может принимать любое значение, будь то число / строка или сложный объект.

В вашем случае простого FormControl для объекта ContentType должно быть достаточно, и вы можете использовать formControlName внутри вашего шаблона в сочетании с директивой [FormGroup]:

 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>