How validate dynamic formgroup input in angular

Question

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>

Chellappan வ · Accepted Answer · 2022-03-10 10:30:02Z

1

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

answered Mar 10, 2022 at 10:30

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SKL Over a year ago

May i know how to listen to valuechanges for each formControl to check old and new value ?

Chellappan வ Over a year ago

It's difficult to listen particular formGroup. since you are using id for each formGroup ,It's better you can listen to whole formGroup valueChanges and do the comparision

Jijo Alexander · Accepted Answer · 2022-03-10 10:22:07Z

1

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()
    });
  }

answered Mar 10, 2022 at 10:22

Jijo Alexander

1,2888 silver badges17 bronze badges

2 Comments

SKL Over a year ago

Thanks for link. How we can validate formGroup inside of formArray?

Jijo Alexander Over a year ago

stackoverflow.com/questions/53997655/… - Please refer to this, Also approve as answer if it usefull

Collectives™ on Stack Overflow

How validate dynamic formgroup input in angular

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related