title: How to create reactive form for each table row
body: <p>As you can see I have a code that pulls the data that is to be rendered on the table , each row has an input field , I want to add reactive form to  input fields on each row.</p>
  <p>On the mat cell you see that I looped <code>&lt;mat-cell *matCellDef=&quot;let model&quot; class=&quot;p-2&quot;&gt;</code> each model has it own mat-form-field</p>
  <p>the model should be each data row as you can see on the table.</p>
  <p>#code that calls the data to be populated on the table</p>
  <pre><code> private getDetails() {    
      this.isLoading = true;
      this.service
      .getDetails(this.filterModel)
      .pipe(finalize(() =&gt; (this.isLoading = false)))
      .subscribe({
        next: (res) =&gt; { 
          this.table.data = res.items as Array&lt;any&gt;;
          this.table.totalElements = res.totalItemCount;   
        },
        error: (err) =&gt; {
          
        },
        complete: noop,
      });
    }
  </code></pre>
  <p>#creates model form code - the model should be the each row data of the table</p>
  <pre><code>modelForm: FormGroup;
  
    this.modelForm = this._createModelForm(this.model);
  
        private createModelForm(model): FormGroup {
          return this.formBuilder.group({
            id: model.id,
            start: model.dateStart,
            end: model.dateEnd,
          });
        }
  </code></pre>
  <p>#html code</p>
  <pre><code>&lt;mat-table [dataSource]=&quot;table.dataSource&quot; [@animateStagger]=&quot;{value:'50'}&quot; matMultiSort
      (matSortChange)=&quot;table.onSortEvent()&quot;&gt;
      &lt;ng-container matColumnDef=&quot;inspectionId&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-multi-sort-header=&quot;id&quot;&gt;
              &lt;span class=&quot;text-left&quot;&gt;COLUMN 1&lt;/span&gt;
          &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let model&quot; class=&quot;p-2&quot;&gt;
              &lt;form [formGroup]=&quot;modelForm&quot;&gt;
                  &lt;div fxLayout=&quot;row&quot; class=&quot;inspection-schedule-property-border-bottom&quot; style=&quot;width: 99%;&quot;&gt;
                      &lt;div fxFlex=&quot;40&quot; class=&quot;inspection-schedule-property-header-sub-label&quot;&gt;
                          &lt;mat-form-field appearance=&quot;fill&quot; style=&quot;padding-right: 8px;&quot; fxFlex=&quot;40&quot;&gt;
                              &lt;mat-label&gt;
                                  enter date
                              &lt;/mat-label&gt;
                              &lt;mat-date-range-input&gt;
                                  &lt;input matStartDate placeholder=&quot;start date&quot; required formControlName=&quot;start&quot;&gt;
                                  &lt;input matEndDate placeholder=&quot;end date&quot; required formControlName=&quot;end&quot;&gt;
                              &lt;/mat-date-range-input&gt;
                              &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                              &lt;mat-date-range-picker #picker&gt;&lt;/mat-date-range-picker&gt;
                              &lt;mat-error *ngIf=&quot;modelForm.controls.start.hasError('required')&quot;&gt;Start date is
                                  required&lt;/mat-error&gt;
                              &lt;mat-error *ngIf=&quot;modelForm.controls.end.hasError('required')&quot;&gt;End date is
                                  required&lt;/mat-error&gt;
                          &lt;/mat-form-field&gt;
              &lt;/form&gt;
  
          &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  &lt;/mat-table&gt;
  </code></pre>