How to refresh the Columns based on selected value in another column of same row in Angular?

Question

I have an Angular application that creates a dynamic table using Angular Material. There are three columns in the table: Type, InputValue, and OutputValue. Based on the value selection in the Type column of the same row, I have successfully updated the InputValue and OutputValue columns dynamically. Columns are connected to the data source with (selectionChange) and [(ngModel)].Please find the below snippet of code,

HTML Code:

 <ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef mat-sort-header > Type </th>
    <td mat-cell *matCellDef="let row">
      <div *ngIf="selection.isSelected(row); else display">
        <mat-form-field class="table">
          <mat-select [(ngModel)]="row.type" placeholder="Select..." name="type" #type="ngModel" (selectionChange)="typeChange(row)" required>
            <mat-option *ngFor="let type of types" [value]="aType">{{aType}}</mat-option>
          </mat-select>
          <mat-error *ngIf="type.errors">
            <strong>Required</strong>
          </mat-error>
        </mat-form-field>
      </div>
      <ng-template #display>{{row.type}}</ng-template>
    </td>
  </ng-container>

<ng-container matColumnDef="inputValue" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header >Input Value </th>
    <td mat-cell *matCellDef="let row">
      <div *ngIf="selection.isSelected(row); else display">
        <mat-form-field class="table">
          <input matInput [(ngModel)]="row.inputValue" name="inputValue" type="number" #inputValue="ngModel" [placeholder]="placeholder" rangeValidator [minValue]="minValue" maxValue="8190" required>
          <mat-error *ngIf="inputValue.errors">
            <strong>{{utils.getIntegerRangeError(inputValue.errors)}}</strong>
          </mat-error>
        </mat-form-field>
      </div>
      <ng-template #display>{{row.inputValue}}</ng-template>
    </td>
  </ng-container>

<ng-container matColumnDef="outputValue" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header > Output Value </th>
    <td mat-cell *matCellDef="let row">
      <div *ngIf="selection.isSelected(row); else display">
        <mat-form-field class="table">
          <input matInput [(ngModel)]="row.outputValue" name="outputValue" type="number" #outputValue="ngModel" [placeholder]="placeholder" rangeValidator [minValue]="minValue" maxValue="8190" required>
          <mat-error *ngIf="outputValue.errors">
            <strong>{{utils.getIntegerRangeError(outputValue.errors)}}</strong>
          </mat-error>
        </mat-form-field>
      </div>
      <ng-template #display>{{row.outputValue}}</ng-template>
    </td>
  </ng-container>


<div  class="button-bar">
        <button mat-raised-button (click)="onSave()" [disabled]="templateForm.invalid || isInputPidZero()" color="primary">Save</button>
        <button mat-raised-button (click)="onCancel(templateForm)" cdkFocusInitial class="button-rounded cancel-action">Cancel</button>
    </div>

TS Code:

  typeChange(element : Type) {
    switch (element.type) {
  case 'A':

    element.inputValue = 2;
    element.outputValue = 2;
    element.minValue = 2;
    element.placeholder = "2 - 100";
    break;
    
   case 'B':

    element.inputValue = 1;
    element.outputValue = 1;
    element.minValue = 1;
    element.placeholder = "1 - 100";
    break;
} }


isInputPidZero(): boolean {
    return this.dataSource.data.some(row => (row.inputValue < row.minValue || row.outputValue < row.minValue || row.inputValue === undefined || row.outputValue === undefined));  }

Additionally, depending on the Type selection, I have provided validation (isInputZero()) for the values that must be entered in the InputValue and OutputValue columns. For example, if I choose A in the type column, the minValue for both columns should be 2, and if I choose B, the minValue should only be 1. If the user enters the value less than the minValue, the error message will be displayed.

The problem is that after entering the value 1 and choosing the A type, I received the error message as expected. Then I changed the type to B, but even if value 1 is a valid value for B type, the error warning remains.

Kindly let me know how to refresh both columns or how to solve the above error when the type is modified.

Thanks in Advance.

Answer 1

It seems that the variable minValue is comming from nowhere, maybe you mean this in your validations (I added the row.):

[minValue]="row.minValue"