dynamic formcontrol in reactive forms - angular

Question

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?

This: #{{e.quesId}} will not work as far as I know. You’ll need to solve this in the component I’m afraid. — MikeOne
– MikeOne, Commented Sep 17, 2020 at 18:58

V.Tur · Accepted Answer · 2020-09-17 19:15:49Z

1

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>

edited Sep 17, 2020 at 19:15

answered Sep 17, 2020 at 18:30

V.Tur

1,44715 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Geek Over a year ago

I tried this but getting the same. The value inside span tag doesnt change.

Pallavi · Accepted Answer · 2020-09-18 06:31:54Z

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;
   }

Collectives™ on Stack Overflow

dynamic formcontrol in reactive forms - angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related