title: Is there a way to create a dynamic form group from an array of objects to edit an table row for dynamic table in Angular 11?
body: <p>I want to create a dynamic data table that will receive data from a backend server. The data will come in as an array of objects. Is there a way to dynamically create/bind a form group from the data that would allow inline editing for each row of the table and to update the changes when in edit mode. I don't want to hardcode data for the table each time unless I would have to. I am not able to use Angular Material for this project either. This is the component for the table row. The table functions as a data table but I can't seem to figure out how to make it editable.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    Component,
    Input,
    Output,
    EventEmitter,
    ViewChild,
    ChangeDetectionStrategy,
  } from '@angular/core';
  import { FormGroup, FormBuilder } from '@angular/forms';
  import { EditButtonGroupComponent } from '../../edit-button-group/edit-button-group.component';
  
  @Component({
    selector: '[dataTableRow]',
    templateUrl: './data-table-row-form.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class DataTableRowFormComponent {
    @ViewChild('editButtonGroup', { static: true })
    editButtonGroup: EditButtonGroupComponent;
    @Input() data: any[];
    @Input() formModel: any;
    @Input() useEditButton: boolean;
    @Input() updating: boolean;
    @Input() deleting: boolean;
    @Input() index: number;
    
    checkMark(value: any) {
      if (value === true) {
        return 'bi bi-check-lg';
      } else {
        return '';
      }
    }
  
    booleanCheck(val: any) {
      if (typeof val === 'boolean') {
        return true;
      } else {
        return false;
      }
    }
  
    returnZero() {
      return 0;
    }
  
    enableEditMode() {
      this.editModeEnabled = true;
      this.copyModel();
    }
  
    disableEditMode() {
      this.editModeEnabled = false;
      this.copyModel();
    }
    
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;td *ngFor="let y of data[index] | keyvalue : returnZero"&gt;
    &lt;i [ngClass]="checkMark(y.value)" *ngIf="booleanCheck(y.value) else default"&gt;&lt;/i&gt;
    &lt;ng-template #default&gt;
      &lt;ng-container *ngIf="!editModeEnabled else form"&gt;{{y.value}}&lt;/ng-container&gt;
      &lt;ng-template #form&gt;
        &lt;input type="text" class="form-control" [(ngModel)]="formModel" /&gt;
      &lt;/ng-template&gt;
    &lt;/ng-template&gt;
  &lt;/td&gt;
  &lt;td *ngIf="useEditButton"&gt;
    &lt;edit-button-group [editing]="isEditing &amp;&amp; updating" [deleting]="isDeleting &amp;&amp; deleting" (onDelete)="delete()"
      (onEdit)="update()" (onEditModeEnabled)="enableEditMode()" (onEditModeDisabled)="disableEditMode()"
      (onDelete)="onEmit()"&gt;
    &lt;/edit-button-group&gt;
  &lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>1.</p>
  <p>List item</p>