How validate dynamic formgroup input in angular

March 10, 2022

I have created dynamic formGroup in angular material table. Each row has one input field and add to cart & remove button. Button should be disabled in each row if that particular row’s input is invalid. Please let me know where I made the mistake.

Source code: Demo

Image:

html:

<form [formGroup]="productForm">
   <table
      mat-table
      formArrayName="productsArray"
      [dataSource]="tableDetails"
      multiTemplateDataRows
      matSort
      >
      <ng-container matColumnDef="date">
         <mat-header-cell *matHeaderCellDef mat-sort-header>
            Product Date
         </mat-header-cell>
         <mat-cell *matCellDef="let row">
            {{ row.value.date | date: 'dd-MMM-yyyy' }}
         </mat-cell>
      </ng-container>
      <ng-container matColumnDef="expandedDetail">
         <mat-cell
         *matCellDef="let child; let rowindex = dataIndex"
         [attr.colspan]="tableColumns.length"
         [formGroupName]="tableDetails.data.indexOf(child)"
         >
         <div class="col-sm-6 mt-3">
            <div class="row pb-1">
               <h6>Input 2</h6>
               <textarea
                  formControlName="input2"
                  ></textarea>
            </div>
            <button [disabled]="productForm.invalid" (click)="addCart()">
            add to cart
            </button>
            <button>remove</button>
         </div>
         </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
      <mat-row
         matRipple
         *matRowDef="let child; columns: tableColumns"
         class="element-row"
         ></mat-row>
      <mat-row
         *matRowDef="let row; columns: ['expandedDetail']"
         style="overflow: hidden"
         ></mat-row>
   </table>
</form>

>Solution :

Access FormGroup inside formArray using index then check invalid on that formGroup.

<button [disabled]="productForm.get('productsArray').at(tableDetails.data.indexOf(child)).invalid" (click)="addCart()">
                add to cart
</button>

ForkedExample