Angular reactive form in array, how to get formcontrolnames?

Question

<div *ngFor="let reply of repliesForm?.get('replies')?.value; let i = index;">
    <div [innerHTML]="reply.body"></div>
    <textarea formControlName="reply.body"></textarea>
</div>

The innerHTML is set fine but how do I get the formControlName to bind to the textarea?

Does this answer your question? [Angular property binding](https://stackoverflow.com/questions/46368382/angular-property-binding) — Obsidian Age, Aug 05 '21 at 01:52
Can you please share your ts code of reactive Form, So that I can figure out your problem — Suneel Kumar, Aug 05 '21 at 05:01

score 1 · Answer 1 · answered Aug 05 '21 at 02:49

1

I think you should change your loop like this. Because you can access both value and control.

<div *ngFor="let replyControl of repliesForm?.get('replies'); let i = index;">
    <div [innerHTML]="replyControl.value.body"></div>
    <textarea [formControl]="replyControl"></textarea>
</div>

answered Aug 05 '21 at 02:49

HungCung

188
1
2
9

But the textarea is not bound to the body here – Gordon Hickley Aug 05 '21 at 03:00

score 0 · Answer 2 · answered Aug 05 '21 at 11:44

0

I think this will work fine for you

<div *ngFor="let reply of repliesForm?.get('replies')?.value; let i = index;">
  <div [innerHTML]="reply.body"></div>
  <textarea formControlName="{{reply.body}}"></textarea>
</div>

answered Aug 05 '21 at 11:44

Chiranjaya Denuwan

614
7
10

Angular reactive form in array, how to get formcontrolnames?

2 Answers2