mat-select value dosen't work with formControlName

Question

I am using mat-select ,I need to set default value for it. It works but After adding formControlName to it, its default value is not displayed.

I tried [(ngModel)] and [(value)] , and "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

If you are using "formControlName" you can access the controller in the TS file and set value like:

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

Answer 2

When it comes to using reactive forms, I would recommend you to set/update your FormControl by using the setValue() or patchValue() methods. You may read up more about it over here.

This is one way you can update your form values using patchValue. Assuming the object has a id of 1,

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

On your 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>