How validate dynamic formgroup input in angular-CodePudding

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:

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 >
            <div >
               <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"
         
         ></mat-row>
      <mat-row
         *matRowDef="let row; columns: ['expandedDetail']"
         style="overflow: hidden"
         ></mat-row>
   </table>
</form>

CodePudding user response：

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

CodePudding user response：

Here I'm adding a sample code so that you can refer, also please refer the attached read for more details - https://netbasal.com/three-ways-to-dynamically-alter-your-form-validation-in-angular-e5fd15f1e946

ngOnInit() {
    this.form = new FormGroup({
      optionA: new FormControl(false),
      optionB: new FormControl(false),
      optionBExtra: new FormControl({ disabled: true, value: '' }, 
                   [Validators.required, Validators.minLength(5)])
    });

    this.optionB.valueChanges.subscribe(checked => {
      checked ? this.optionBExtra.enable() : this.optionBExtra.disable()
    });
  }