I have a very large form with many checkboxes, radios, textareas... The whole form is dynamically generated from a DB.

At some points, I need to validate a group of checkboxes, in which at least one checkbox of that checkbox-group must be checked. So I followed this manual:

My problem is, that the form group inside the form group must be generated dynamically.

I tried something like this:

this.outerForm.addControl('checkboxGroup' + (foo.id + ' ')), new FormGroup({}));

foo.forEach(bar => { get('checkboxGroup' + (foo.id + ' ')).addControl('checkbox'+ (foo.id + ' ') + (bar.id + ' ')), new FormControl(' ')); }

But I am pretty sure that this is pletely wrong because addControl does not work with form groups and I have no idea how to reference that dynamic FormGroup checkboxGroup1 in the addControl-Part, get seems wrong.

outerform
--> textarea
--> checkboxGroup1
----->checkbox11
----->checkbox12
----->checkbox13
----->checkbox14
--> textarea
--> textarea
--> checkboxGroup2
----->checkbox21
----->checkbox22
----->checkbox23
----->checkbox24

I have a very large form with many checkboxes, radios, textareas... The whole form is dynamically generated from a DB.

At some points, I need to validate a group of checkboxes, in which at least one checkbox of that checkbox-group must be checked. So I followed this manual: https://stackoverflow./a/54036689/11937089

My problem is, that the form group inside the form group must be generated dynamically.

I tried something like this:

this.outerForm.addControl('checkboxGroup' + (foo.id + ' ')), new FormGroup({}));

foo.forEach(bar => { get('checkboxGroup' + (foo.id + ' ')).addControl('checkbox'+ (foo.id + ' ') + (bar.id + ' ')), new FormControl(' ')); }

But I am pretty sure that this is pletely wrong because addControl does not work with form groups and I have no idea how to reference that dynamic FormGroup checkboxGroup1 in the addControl-Part, get seems wrong.

outerform
--> textarea
--> checkboxGroup1
----->checkbox11
----->checkbox12
----->checkbox13
----->checkbox14
--> textarea
--> textarea
--> checkboxGroup2
----->checkbox21
----->checkbox22
----->checkbox23
----->checkbox24

• javascript
• angular

• Take a look at form builder and form array here angular.io/guide/… , and this medium./aubergine-solutions/… – Yasser Mas Commented Aug 22, 2019 at 13:42
• The medium article was moved here: auberginesolutions./blog/… – Michael Commented Aug 6, 2023 at 13:39

3 Answers 3

Try somthing like this with formArray https://stackblitz./edit/angular-form-array-example

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>

        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
          </ng-container>
        </div>

      </div>
    </form>
  `,
})
export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      username: '',
      password: '',
    }));
  }
}

Solved it myself, I was really close. this.outerForm.addControl('checkboxGroup' + (foo.id + ' ')), new FormGroup({})); works just fine.

get('checkboxGroup' + (foo.id + ' ')).addControl('checkbox'+ (foo.id + ' ') + (bar.id + ' ')), new FormControl(' ')); was not plete.

(this.outerForm.get('checkboxGroup' + (foo.id + ' ')) as any).addControl('checkbox'+ (foo.id + ' ') + (bar.id + ' ')), new FormControl(' ')); did the trick.

You can use @angular/forms. So, you can use FormGroup, FormArray, FormControl. Just for example please have a look at https://stackblitz./edit/angular-3x3tme?file=src/app/hello.ponent.ts