Angular Reactive Form - Render control in form array for a string array

Question

I have a string array of emails as below:

{
   "streetName": "street 1",
   "emails" : [
     "[email protected]",
     "[email protected]"
   ]
}

How would I render this in reactive form input fields?

I tried this but not working:

<div class="row mt-4" formArrayName="emails">
  <div class="col" *ngFor="let email in myform.get('emails')['controls']; let emailIndex=index">
    <input type="text" placeholder="" formControlName="emailIndex"/>
  </div>
</div>

Yong Shun · Accepted Answer · 2022-12-27 13:38:58Z

3

The problem was the *ngFor part. You have to use of for [ngForOf] directive. And pass the emailIndex with [formControlName] attribute.

<div
  class="col"
  *ngFor="
    let email of myform.get('emails')['controls'];
    let emailIndex = index
  "
>
  <input type="text" placeholder="" [formControlName]="emailIndex" />
</div>

Besides, you should also look for the component part for the way how you patch the control. You need to iterate each value in the data.emails array and add the FormControl to emails FormArray.

for (let index in this.data.emails) {
  (this.myform.controls.emails as FormArray).controls.push(
    new FormControl(this.data.emails[index])
  );
}

Demo @ StackBlitz

answered Dec 27, 2022 at 13:38

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

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

3 Comments

Dickens A S Over a year ago

for me it is rendering as [object Object]

Yong Shun Over a year ago

Which part that render the [object Object]? Can you create a demo in StackBlitz? Thanks.

Dickens A S Over a year ago

I go the issue, I am adding FormGroup instead of FormControl, your code is correct

Collectives™ on Stack Overflow

Angular Reactive Form - Render control in form array for a string array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related