Значение mat-select не работает с formControlName

Question

Я использую mat-select, мне нужно установить для него значение по умолчанию. Это работает, но после добавления formControlName его значение по умолчанию не отображается.

Я пробовал [(ngModel)] и [(значение)], а также "mat-autocomplete"

<mat-form-field>
 <mat-select placeholder="پیش نمایش" 
   formControlName="lesson" 
     [value]="free_demo"
      (selectionChange)="onSelectDemo(i)">
      <mat-option [value]="demo.id"
       *ngFor="let demo of demos[i]">
        {{ demo.title }}
       </mat-option>
   </mat-select>

Answer 1

Если вы используете «formControlName», вы можете получить доступ к контроллеру в файле TS и установить значение, например:

this.yourFormName.controls['lesson'].setValue('your value or' + this.dynamicValue )

Answer 2

Когда дело доходит до использования реактивных форм, я бы порекомендовал вам установить / обновить ваш FormControl, используя методы setValue() или patchValue(). Вы можете прочитать об этом больше здесь .

Это один из способов обновления значений формы с помощью patchValue. Предполагая, что объект имеет идентификатор 1,

this. editProductForm.patchvalue({
  sub_products: [{
    lesson: '1'
  }]
});

На вашем component.ts,

<mat-form-field>
 <mat-select placeholder="پیش نمایش" 
   formControlName="lesson" 
   (selectionChange)="onSelectDemo(i)">
   <mat-option [value]="demo.id" *ngFor="let demo of demos[i]">
     {{ demo.title }}
   </mat-option>
 </mat-select>
</mat-form-field>