title: nested formarray within group angular 6
body: <p>Good Day.</p>
  
  <p>I looked for the solution, and even though there are a view similar question to what I am asking, I am sure this one is a bit more unique and not a duplicate.</p>
  
  <p>here is my html form:</p>
  
  <pre><code>&lt;div class="form-group col-md-6" formGroupName="schema"&gt;
    &lt;div formArrayName="currencies"&gt;
      &lt;input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my ts formBuilder.</p>
  
  <pre><code>this.createPromo = this.fb.group({
        type: ['promotion'],
        name: ['', Validators.required],
        description: ['', Validators.required],
        enabled: ['', Validators.required],
        promotion_type: ['', Validators.required],
        start: ['', Validators.required],
        end: ['', Validators.required],
        schema: this.fb.group({
          currencies: this.fb.array([
            this.fb.group({
              percentage: '',
              currency: 'ZAR'
            })
          ])
        }),
      });
  </code></pre>
  
  <p>So I want my form to submit as a grouped array. However the error in the console is the following <code>Cannot find control with path: 'schema -&gt; currencies -&gt; percentage'</code>, thus I am not able to submit my form as <code>percentage</code> is empty even after I input a number. </p>