Dynamically adding form fields to reactive forms in Angular 8

Question

I'm having some trouble getting form fields to populate from an array. My original thinking is to input the array from individual components to a single component that will handle the form. Instead of making multiple forms. But I can't seem to get it to work. Any help would be appreciated! I've been through Google/stack/medium and can't seem to find anything. I've done an example on plunkr.

https://stackblitz.com/edit/angular-t7hcq6

In the ts file:

  public demoForm: FormGroup;
  public arrayItems: data = [];

  private formFields = ["Sku", "Title"];

  constructor(private _formBuilder: FormBuilder) {
    this.demoForm = this._formBuilder.group({
      demoArray: this._formBuilder.array([])
    });
  }

  ngOnInit() {
    this.formFields.map(field => {
      this.arrayItems.push({ title: field });
      this.demoArray.push(this._formBuilder.control(''));
    });
  }

  get demoArray() {
    return this.demoForm.get("demoArray") as FormArray;
  }

In the template:

<form [formGroup]="demoForm">
   <div formArrayName="demoArray" 
      *ngFor="let arrayItem of arrayItems; let i=index">
      <input type="checkbox"[formControl]="demoArray[i]">
      <label>{{arrayItem.title}}</label>
   </div>
</form>

Thank you guys.

It's generally a good idea to provide some code here on your question to help us answer. Are you using FormArray? — Will Alexander
– Will Alexander, Commented Oct 17, 2019 at 16:47
Sorry @WillAlexander This is my first time contributing to Stack I wasn't aware. The problem has now been resolved however below. Thanks for taking the time though. — Lewis Morgans
– Lewis Morgans, Commented Oct 17, 2019 at 17:45

Henrique Erzinger · Accepted Answer · 2019-10-17 16:57:18Z

3

change your template like so:

<form [formGroup]="demoForm">
   <div formArrayName="demoArray" 
      *ngFor="let arrayItem of arrayItems; let i=index">
      <input type="checkbox" [formControlName]="i"> <!-- this line -->
      <label>{{arrayItem.title}}</label>
   </div>
</form>

answered Oct 17, 2019 at 16:57

Henrique Erzinger

1,1478 silver badges17 bronze badges

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

3 Comments

Lewis Morgans Over a year ago

Thank you so much for your help on this. I appreciate your support!

Rafael Guimarães Over a year ago

How to add a new checkbox using this example?

Henrique Erzinger Over a year ago

@RafaelGuimarães this.demoArray.push(this._formBuilder.control(/* your new control stuff */));

Collectives™ on Stack Overflow

Dynamically adding form fields to reactive forms in Angular 8

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