How to fix string interpolation is not working in textarea with fornControlName?(Angular)

Question

in the following code if I use

formControlName="work_sample_description"

for textarea , the text area does not load with the value of

WorkSampleObj.work_sample_description

if I remove

formControlName="work_sample_description"

code runs as expected..!

How to fix it?

<form [formGroup]="workSampleEditForm" (ngSubmit)="edit_work_sample(workSampleEditForm.value)">
        <mat-card-content>
          <mat-form-field appearance="fill" class="full-width">
              <textarea matInput rows="7" formControlName="work_sample_description">{{WorkSampleObj.work_sample_description}}</textarea>
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button *ngIf="workSampleEditForm.disabled" (click)="workSampleEditForm.enable()">Edit description</button>
          <button mat-button *ngIf="workSampleEditForm.enabled">Save Changes</button>
          <button mat-button>Delete</button>
        </mat-card-actions>
   </form>

I tried also this

workSampleEditForm = new FormGroup({
    work_sample_description : new FormControl(this.WorkSampleObj.work_sample_description,[])
  });

---------------
<textarea matInput rows="7" [formControlName]="'work_sample_description'"></textarea>

Answer 1

The issue is, that [formControlName] expects string name of the given form control. And you are passing reference to it. If you form group workSampleEditForm contains work_sample_description form control then just pass its name as a string (put the name in the single quotes)

<textarea 
  matInput rows="7" 
  [formControlName]="'work_sample_description'">
</textarea>

As mentioned by @MikeOne, if you get the value of this.WorkSampleObj.work_sample_description from API and not when the Form is created, you should set it using setValue.

ngOnInit(): void {
  this.someApiCall.subscribe((res) => {
    this.testForm.get('textAreaFC').setValue(res.value);
  });
}

See updated stackblitz.