title: How to get a nested FormArray control in Angular 9 ReactiveForm
body: <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>The first part of the problem was solved thanks to the answer of Chellappan above, but i am encountering other problems, that made me do a stackblitz that can be found here :
  <a href="https://stackblitz.com/edit/angular-ivy-bzh3dh" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-bzh3dh</a></p>
  
  <p>The problems are that i can't retrieve correctly the list of products selected from the form cause they are all outputed :</p>
  
  <pre><code>  "courses": [
      {
        "courseName": "Dessert",
        "products": [
          {
            "product": true
          },
          {
            "product": false
          },
          {
            "product": null
          }
        ]
  </code></pre>
  
  <p>I don't know how to be able to retrieve something like:</p>
  
  <pre><code>  "courses": [
      {
        "courseName": "Dessert",
        "products": [
          {
            "Crumble aux pommes": true
          },
          {
            "Mousse au chocolat maison": false
          },
          {
            "Riz au lait": false
          }
        ]
  </code></pre>
  
  <p>And the second problem is that the labels of my checkboxes are not independent. If i add a new 'course' and that i select some products, the labels of all checkboxes in other courses are changed too.</p>
  
  <p><a href="https://i.stack.imgur.com/LrPz1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LrPz1.png" alt="enter image description here"></a></p>
  
  <p>I hope that my post is not too messy, i don't edit messages so often on Stack Overflow</p>
  
  <p><strong>END OF EDIT</strong></p>
  
  <hr>
  
  <p>I have a reactive form with nested form Array to describe a menu that contains several courses
  and each course contans several products, but i can't figure out how to make it works.
  My actual problem is that i don't manage to retrieve my second level of controls.</p>
  
  <p>Here is the json structure of the menu: </p>
  
  <pre><code>{
    "name": "",
    "description": "",
    "price": "",
    "courses": [
      {
        "courseName": "",
        "products": [
          {
            "product": ""
          }
        ]
      }
    ]
  }
  
  </code></pre>
  
  <p>I followed this project as an example :</p>
  
  <p><a href="https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.ts" rel="nofollow noreferrer">Deep nested reactive form</a></p>
  
  <p>Here is my simplified form for readability purpose :</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;form [formGroup]="menuForm" (ngSubmit)="onSubmit(menuForm)"&gt;
  
          &lt;div class="form-group"&gt;
            &lt;input
              class="form-control"
              formControlName="name"
              type="text"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;textarea
              class="form-control"
              formControlName="description"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 form-group"&gt;
            &lt;input
              class="form-control"
              formControlName="price"
              type="number"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row col-md-12"&gt;
          &lt;button class="btn btn-outline-dark" type="button" (click)="onAddCourse()"&gt;
            Add course
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class="row" formArrayName="courses"&gt;
          &lt;div *ngFor="let course of getCourses(menuForm); let i = index"
              [formGroupName]="i"&gt;
  
            &lt;div class="..."&gt;
                &lt;select
                  class="form-control"
                  formControlName="courseName"&gt;
                  &lt;option *ngFor="let course of courses"&gt;{{course.name}}&lt;/option&gt;
                &lt;/select&gt;
  
                &lt;button type="button" class="mt-2 btn btn-outline-dark" (click)="onLoadProducts(i)"&gt;
                  Load Products // &lt;- will load products that have course Name selected form the input 'courseName'above
                &lt;/button&gt;
  
                &lt;div class="row" formArrayName="products"&gt;
                  &lt;div class="col-md-12"
                       *ngFor="let product of getProducts(menuForm); let j = index"
                        [formGroupName]="j"&gt;
                    &lt;input class="form-check-input" type="checkbox" id="product{{i}}-{{j}}" 
                     formControlName="product"/&gt;
                    &lt;label class="form-check-label" for="product{{i}}-{{j}}"&gt;product&lt;/label&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
        &lt;div class="row col-md-12"&gt;
          &lt;button class="btn btn-success mr-1" type="submit" [disabled]="!menuForm.valid"&gt;{{buttonSubmitLabel}}&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>And here is my form initialisation in TS :</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MenuEditComponent implements OnInit {
  
    menuForm: FormGroup;
    menu: MenuModel;
    categories: CategoryModel[];
  ...
  
    constructor(private router: Router,
                private route: ActivatedRoute,
                private productService: ProductService,
                private menuService: MenuService) { }
  
    ngOnInit(): void {
      this.productService.getCategories().subscribe(
        result =&gt; {
          this.categories = result;
        },
        error =&gt; {
          console.log(error);
          this.categories = [];
        });
      this.initForm();
    }
  
    initForm() {
      this.menuForm = new FormGroup({
        name: new FormControl('', [Validators.required, Validators.maxLength(100)]),
        description: new FormControl('', Validators.maxLength(255)),
        price: new FormControl('', [Validators.required, Validators.min(0)]),
        courses: new FormArray([
          this.initCourse(),
        ])
      });
    }
  
    initCourse() {
      return new FormGroup({
        courseName: new FormControl(''),
        products: new FormArray([
          this.initProduct()
        ])
      });
    }
  
    initProduct() {
      return new FormGroup({
        product: new FormControl('')
      });
    }
  
    getCourses(form) {
      return form.controls.courses.controls;
    }
  
    getProducts(form) {
      return form.controls.products.controls;
    }
  
    onAddCourse() {
      const control = this.menuForm.get('courses') as FormArray;
      control.push(this.initCourse());
    }
  
    onLoadProducts(i: number) {
      console.log(this.menuForm.controls.courses);
      const courseControl = this.menuForm.get('courses') as FormArray;
      const course = courseControl.at(i).get('courseName').value;
      console.log(course);
      const products: ProductModel[] = this.mapProducts.get(course);
      console.log(products);
      const productControl = this.menuForm.get('courses').get[i].get('products') as FormArray;
  
    onSubmit(menuForm: FormGroup) {
      ...
    }
  
  ...
  }
  </code></pre>
  
  <p>If i leave the backend like that, i have an error :</p>
  
  <pre><code>Cannot read property 'controls' of undefined at MenuEditComponent.getProducts
  </code></pre>
  
  <p>So my 'products' FormArray is not initialized.
  If i do :</p>
  
  <pre class="lang-js prettyprint-override"><code>  getProducts(form) {
      return form.controls.products?.controls;
    }
  </code></pre>
  
  <p>i don't have the error anymore, but i can't access the products formControls.
  If i try :</p>
  
  <pre class="lang-js prettyprint-override"><code>  onLoadProducts(i: number) {
      const courseControl = this.menuForm.get('courses') as FormArray;
      const course = courseControl.at(i).get('courseName').value;
      const products: ProductModel[] = this.mapProducts.get(course);
      const productControl = this.menuForm.get('courses').get[i].get('products') as FormArray;
      //On the last line i get a 'Cannot read property 'get' of undefined'
  ...
  }
  </code></pre>
  
  <p>What am i doing wrong ? Why my 'products' FormArray is not initialized ?</p>
  
  <p>Thanks a lot for your help !</p>