title: Angular 7 and Angular Material table with data source error when generating drop list form control for each row
body: <p>Based on this <a href="https://stackoverflow.com/questions/49992158/how-to-set-up-proper-bindings-for-material-table-with-dropdown-inside-cell">question</a> on stack, I need to bind a drop down list, for each row generated from angular material table <code>dataSource</code>. The drop down list should select automatically the correspondent value, as other values.</p>
  <p>This is table:</p>
  <pre><code>&lt;form [formGroup]=&quot;formGroup&quot;&gt;
      &lt;table mat-table [dataSource]=&quot;dataSource&quot; matSort&gt;
  
  
        &lt;!-- &lt;ng-container matColumnDef=&quot;ind_id&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Ind. ID &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.iid}} &lt;/td&gt;
        &lt;/ng-container&gt; --&gt;
  
  
        &lt;ng-container matColumnDef=&quot;name&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot; [matTooltip]=&quot;element.iid&quot; matTooltipPosition=&quot;left&quot;&gt; &lt;b&gt;{{element.far}} {{element.lar}}&lt;/b&gt; &lt;/td&gt;
          
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef=&quot;head_hh&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Head Of HH &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.hhead}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;ng-container matColumnDef=&quot;fr&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Family Rel. &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element; let index = index;&quot; [formGroupName]=&quot;index&quot;&gt;
              &lt;mat-form-field color=&quot;warn&quot; appearance=&quot;outline&quot;&gt;
                  &lt;mat-label&gt;Family Relation&lt;/mat-label&gt;
                  &lt;mat-select id=&quot;family_relation&quot; formControlName=&quot;fr&quot; placeholder=&quot;Family Relation&quot;&gt;                 
                        &lt;mat-option *ngFor=&quot;let familyRelation of familyRelationArray; let i = index&quot; [value]=&quot;frid&quot;&gt;
                      {{familyRelation.family_relation_type}}
                    &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
                &lt;/mat-form-field&gt;&amp;nbsp;
                {{element.fr}}
          &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef=&quot;ms&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Marital Sts. &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.ms}} &lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;status&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Status &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.sts}} &lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;age&quot;&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Age &lt;/th&gt;
          &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.age}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns; sticky: true&quot;&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Here is the typescript code, where I generate a FormArray based on this working <a href="https://stackblitz.com/edit/angular-riepzk-rp5jbf?file=app%2Ftable-basic-example.html" rel="nofollow noreferrer">stackblitz</a> from the question attached above:</p>
  <pre><code>constructor(private fb: FormBuilder, 
      private activatedRoute: ActivatedRoute, 
      private auth: AuthApiService) {
        this.formGroup = this.fb.group({
          'fr': this.createArray()
        })
  }
  </code></pre>
  <p>Now for each <code>formControl</code> of the array, I need to bind the data to drop list:</p>
  <pre><code>createArray(): FormArray{
      return new FormArray(this.dataSource.data.map(item=&gt; new FormGroup({
        fr: new FormControl(item.frid)
      })));
  }
  </code></pre>
  <p>Where <code>frid</code> is the <code>value</code> of each selected option of drop list, and <code>fr</code> is the name displayed for user.</p>
  <p>I am having the following error:</p>
  <blockquote>
  <p>[ts] Property 'frid' does not exist on type '{}'. [2339]</p>
  </blockquote>
  <p>Here a snippet of the returned array:</p>
  <blockquote>
  <p>0: {0: &quot;xyzzz&quot;, 1: &quot;xyz&quot;, 2: 57073, 3: 2, 4: &quot;Parent&quot;, 5:</p>
  <p>&quot;Married&quot;, 6: &quot;Active&quot;, 7: &quot;no&quot;,…}</p>
  <p>0: &quot;xyz&quot;</p>
  <p>1: &quot;zyz&quot;</p>
  <p>2: 57073</p>
  <p>3: 2</p>
  <p>4: &quot;Parent&quot;</p>
  <p>5: &quot;Married&quot;</p>
  <p>6: &quot;Active&quot;</p>
  <p>7: &quot;no&quot;</p>
  <p>8: 61</p>
  <p>age: 61</p>
  <p>far: &quot;xyz&quot;</p>
  <p>fr: &quot;Parent&quot;</p>
  <p>frid: 2</p>
  <p>hhead: &quot;no&quot;</p>
  <p>iid: 57073</p>
  <p>lar: &quot;xyz&quot;</p>
  <p>ms: &quot;Married&quot;</p>
  <p>sts: &quot;Active&quot;</p>
  </blockquote>
  <p>Here is my <a href="https://stackblitz.com/edit/angular-material-arxoij" rel="nofollow noreferrer">stackblitz</a>.</p>
  <p>How to generate form control in each row of data source in angular material 6 table ?</p>