title: How to use grid/array in Angular Reactive Form?
body: <p>Originally created as a Angular 2 Template Form, in order to add auto save feature we are converting to a Reactive Form.</p>
  
  <p>The page has a series of text inputs, persisted to the backend database via .NET Web API. Angular services call the web api.</p>
  
  <p>I have created a FormGroup representing the page's data controls:</p>
  
  <pre><code>const cells = fb.group({
          id: [''],
          question: [''],
          actual: [''],
          budget: [''],
          average: [''],
          top20: ['']            
  });
  this.form = fb.group({
      reviewer: '',
      position: '',
      officeName: '',
      comments1: '',
      comments2: '',
      comments3: '',
      rows: fb.array([cells, cells])
  });
  </code></pre>
  
  <p>The reviewer, position, officeName, and comments fields are working as expected, but I'm having trouble understanding how to represent a data set that is returned as a double array of rows and cells (a grid) within the FormGroup successfully.</p>
  
  <p>In the Template Form version the grid data is received by an observable, like this:</p>
  
  <pre><code>    this.rows = summaryReportQuestion.map(summaryReportQuestionObj =&gt; {
          return {
              cells: [
                  summaryReportQuestionObj.questionID,
                  summaryReportQuestionObj.question,
                  (summaryReportQuestionObj.columnSign == '$' ? (summaryReportQuestionObj.columnSign + ' ' + summaryReportQuestionObj.target) : summaryReportQuestionObj.target + ' ' + summaryReportQuestionObj.columnSign),
                  (summaryReportQuestionObj.budget == null ? summaryReportQuestionObj.budget : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.budget), false) : summaryReportQuestionObj.budget + ' ' + summaryReportQuestionObj.columnSign)),
                  (summaryReportQuestionObj.average == null ? summaryReportQuestionObj.average : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.average), false) : summaryReportQuestionObj.average + ' ' + summaryReportQuestionObj.columnSign)),
                  (summaryReportQuestionObj.top20Percent == null ? summaryReportQuestionObj.top20Percent : (summaryReportQuestionObj.columnSign == '$' ? summaryReportQuestionObj.columnSign + ' ' + this.utilityService.formatNumberWithCommas(Math.floor(summaryReportQuestionObj.top20Percent), false) : summaryReportQuestionObj.top20Percent + ' ' + summaryReportQuestionObj.columnSign))
              ]
          };
      });
  </code></pre>
  
  <p>In the Reactive Form version I have just assigned the value of <code>this.rows</code> to my FormGroup item:</p>
  
  <pre><code>this.molForm.patchValue({rows: this.rows});
  </code></pre>
  
  <p>But it's not working as I expect.</p>
  
  <p>What is the best way to use a double array with Form Groups?</p>