dynamic formcontrol in reactive forms - angular

I have a dynamic formControl where addControl is as follows in my component.ts file:

//...
this.reportList = this.data.reportList; 
for (let i = 0; i < this.reportList.length; i++) {
	const key = this.reportList[i].quesId+'';
	this.afterActionReportForm.addControl(key, new FormControl(this.reportList[i].boardAnswers));
}
...///

my component.html file code looks as follows:

<div  class="row" *ngIf="reportList && reportList.length > 0" style="padding:10px;">
	<div *ngFor="let e of reportList; let i = index" class="col-sm-6" style="margin-top: 2em;">
		{{i+1}}. {{e.question}}
		<textarea style="width:100%" #{{e.quesId}} rows="8" cols="75" maxlength="500" formControlName="{{e.quesId}}"
		class="form-control"  pInputTextArea ></textarea>
		<span> {{e.boardAnswers.length}} of 500 characters</span>
	</div>
</div>

The display part is working fine. But the span has a count which id calculated on the fly and shows up in the UI based on what the textArea is inputed.

like for example shows 25 of 500 characters and as you keep typing the counter has to increase. I was able to do that for my static form as follows:
This one works in static form:

<div class="col-sm-10">
	<textarea style="width:80%" #message rows="8" cols="75" maxlength="500" 
	formControlName="message" class="form-control"  pInputTextArea ></textarea>
	<span> {{message.value?.length || 0}} of 500 characters</span>
</div>

But the same concept doesnt work for dynamic form.{{e.boardAnswers.length}} gives me value only when the page loads up, however when i type in the textArea it doesnt increment.
How do I handle the same with dynamic forms. Suggestions please?

It's working script:

app.component.html
<form [formGroup]="afterActionReportForm">
  <div  class="row" *ngIf="reportList && reportList.length > 0" style="padding:10px;">
    <div *ngFor="let e of reportList; let i = index" class="col-sm-6" style="margin-top: 2em;">
        {{i+1}}. {{e.question}}
        <textarea style="width:100%" #{{e.quesId}} rows="8" cols="75" maxlength="500" [formControlName]="e.quesId"
        class="form-control"  pInputTextArea ></textarea>
        <span> {{afterActionReportForm.get(e.quesId.toString()).value.length}} of 500 characters</span>
    </div>
</div>
</form>

app.component.ts

  ngOnInit() {
    this.afterActionReportForm = new FormGroup({});
    this.reportList = this.data.reportList;
    for (let i = 0; i < this.reportList.length; i++) {
        const key = this.reportList[i].quesId+'';
        this.afterActionReportForm.addControl(key, new FormControl(this.reportList[i].boardAnswers));
    }
  }

And more better create method for counting length

getStrLength(key: string | number): number {
    return this.afterActionReportForm.get(key.toString()).value?.length || 0;
  }

<span> {{getStrLength(e.quesId)}} of 500 characters</span>

I had same requirement. I used the getter method this.f to fetch the form controls. Compared the current quesId with the id from the object of controls to get the value and length. This works for me

Html

    <form [formGroup]="afterActionReportForm">
    <div  class="row" *ngIf="reportList && reportList.length > 0" style="padding:10px;">
      <div *ngFor="let e of reportList; let i = index" class="col-sm-6" style="margin-top: 2em;">
          {{i+1}}. {{e.question}}
          <textarea style="width:100%" #{{e.quesId}} rows="8" cols="75" maxlength="500"  [formControlName]="e.quesId"
          class="form-control"  pInputTextArea ></textarea>
          <span > {{getMyLength(e.quesId)}} of 500 characters</span>
      </div>
  </div>
  </form>

TS

 get f() { return this.afterActionReportForm.controls; }
 

   getMyLength(id){
    var len;
  Object.entries(this.f).forEach(([key,value]) => {
    if(key === id){
     len= value.value.length;
    }
  });
  return len;
   }