title: Nest formArray into other FormArray
body: <p>I'm trying to create a FormArray inside another FormArray but I can't, previously if I was able to do it but it was marking errors right now it no longer marks any errors, but does not believe the fields that I indicate, I hope someone can help me.</p>
  <p>In my component I do it as follows</p>
  <pre><code>formNewProduct = this.formBuilder.group({
      code: ['', Validators.required],
      name: ['', Validators.required],
      infoProduct: this.formBuilder.array([this.newInfo])
    })
  
    get newInfo(): FormGroup {
      return this.formBuilder.group({
        size: this.formBuilder.array([this.newSize]),
        description: [''],
        color: [''],
        // stock: [''],
        price: [''],
        image: [''],
      })
    }
  
    get infos(): FormArray {
      return this.formNewProduct.get('infoProduct') as FormArray;
    }
  
    addInfos() {
      this.infos.push(this.newInfo);
    }
  
    removeInfos(i: number) {
      this.infos.controls.splice(i, 1);
      this.infos.updateValueAndValidity();
    }
  
    get newSize(): FormGroup {
      return this.formBuilder.group({
        size: [''],
        color: [''],
        stock: [''],
      })
    }
  
    get sizes(): FormArray {
      return this.newInfo.get('size') as FormArray;
    }
  
    addSizes() {
      this.sizes.push(this.newSize);
    }
  
    removeSizes(i: number) {
      this.sizes.controls.splice(i, 1);
      this.sizes.updateValueAndValidity();
    }
  </code></pre>
  <p>and my html is this</p>
  <pre><code>&lt;fieldset formArrayName=&quot;infoProduct&quot; class=&quot;mb-3&quot;&gt;
  
      &lt;div class=&quot;row&quot;&gt;
  
        &lt;fieldset class=&quot;col-md-12&quot; name=&quot;size&quot; *ngFor=&quot;let info of infos.controls; let i = index&quot;
          style=&quot;vertical-align: middle&quot; [formGroupName]=&quot;i&quot;&gt;
  
          &lt;div formArrayName=&quot;size&quot; class=&quot;mb-3&quot;&gt;
  
            &lt;fieldset class=&quot;col-md-12&quot; name=&quot;size&quot; *ngFor=&quot;let zise of sizes.controls; let i = index&quot;
              style=&quot;vertical-align: middle&quot; [formGroupName]=&quot;i&quot;&gt;
  
              &lt;div class=&quot;row&quot;&gt;
  
                &lt;div class=&quot;col-md-6 form-group&quot;&gt;
  
                  &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;size&quot; name=&quot;size&quot; placeholder=&quot;Tamaño&quot;
                    formControlName=&quot;size&quot; /&gt;
  
                &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class=&quot;col-md-6 form-group&quot;&gt;
  
                &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;stock&quot; name=&quot;stock&quot; placeholder=&quot;Stock&quot;
                  formControlName=&quot;stock&quot; /&gt;
  
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
  
                &lt;a class=&quot;genric-btn info-border small&quot; (click)=&quot;removeSizes(i)&quot;&gt;
  
                  &lt;mdb-icon fas icon=&quot;minus-circle&quot;&gt;&lt;/mdb-icon&gt;Eliminar
  
                &lt;/a&gt;
  
              &lt;/div&gt;
  
            &lt;/fieldset&gt;
  
            &lt;a class=&quot;genric-btn info-border small&quot; (click)=&quot;addSizes()&quot;&gt;
  
              &lt;mdb-icon far icon=&quot;plus-square&quot;&gt;&lt;/mdb-icon&gt;Agregar
  
            &lt;/a&gt;
  
          &lt;/div&gt;
  
          &lt;div class=&quot;form-group&quot;&gt;
  
            &lt;ckeditor [editor]=&quot;Editor&quot; [config]=&quot;config&quot; data=&quot;data&quot; formControlName=&quot;description&quot;&gt;
            &lt;/ckeditor&gt;
  
            &lt;!-- &lt;textarea class=&quot;form-control&quot; id=&quot;description&quot; name=&quot;description&quot; placeholder=&quot;Descripcion&quot;
                cols=&quot;30&quot; rows=&quot;4&quot; formControlName=&quot;description&quot;&gt;&lt;/textarea&gt; --&gt;
  
          &lt;/div&gt;
  
          &lt;div class=&quot;row&quot;&gt;
  
            &lt;div class=&quot;col-md-6 form-group&quot;&gt;
  
              &lt;color-circle formControlName=&quot;color&quot;&gt;&lt;/color-circle&gt;
  
            &lt;/div&gt;
  
            &lt;div class=&quot;col-md-6 form-group&quot;&gt;
  
              &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;price&quot; name=&quot;price&quot; placeholder=&quot;Precio&quot;
                formControlName=&quot;price&quot; /&gt;
  
            &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class=&quot;form-group&quot;&gt;
  
            &lt;input type=&quot;file&quot; class=&quot;form-control&quot; id=&quot;image&quot; name=&quot;image&quot;
              (change)=&quot;cargarImagen($event, i)&quot; /&gt;
  
          &lt;/div&gt;
  
          &lt;div class=&quot;form-group&quot;&gt;
  
            &lt;a class=&quot;genric-btn info-border small&quot; (click)=&quot;removeInfos(i)&quot;&gt;
  
              &lt;mdb-icon fas icon=&quot;minus-circle&quot;&gt;&lt;/mdb-icon&gt;Eliminar
  
            &lt;/a&gt;
  
          &lt;/div&gt;
  
          &lt;hr&gt;
  
        &lt;/fieldset&gt;
  
      &lt;/div&gt;
  
      &lt;a class=&quot;genric-btn info-border small&quot; (click)=&quot;addInfos()&quot;&gt;
  
        &lt;mdb-icon far icon=&quot;plus-square&quot;&gt;&lt;/mdb-icon&gt;Agregar
  
      &lt;/a&gt;
  
    &lt;/fieldset&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>this don't throw me any error, but doesn't work, hope someone help me to understan how do i need to do it</p>