Disable Mat-Select Option inside mat-table once it has been selected in Angular 8

user_11360509 0
Viewed 834

Just need some home on how to disable Mat-Select Option once it has been selected from other row inside a mat-table. 

       <ng-container matColumnDef="billingRegisterId" >
                  <mat-header-cell *matHeaderCellDef style="direction: ltr">
                    <h6><b>Billing Reference and Description</b></h6>
                  </mat-header-cell>
                  <mat-cell *matCellDef="let element " [formGroup]="element">
                    <mat-form-field floatLabel="never" appearance="none" style="text-align: left">
                      <mat-select formControlName="billingRegisterId" required >
                        <mat-option *ngFor="let billingRegisterOutstandingBalance of billingRegisterOutstandingBalances  | sort:'sequenceNo'" [value]="billingRegisterOutstandingBalance.id">
                          {{ billingRegisterOutstandingBalance.sequenceNo +' | '+ billingRegisterOutstandingBalance.description1}}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
                  </mat-cell>
                </ng-container>

2

angular-material angular
1 Answers

If I understand correctly, you have a list of values to choose from billingRegisterOutstandingBalances, and if one of the values is already selected you want to disable it from others select.

One simple way it occurs to me, is to add a boolean attribute (selected) to the objects of the list (or to have a secondary boolean list and use the index), and then just add a simple condition for option disabled property. Something like this,

<mat-option 
*ngFor="let billingRegisterOutstandingBalance of billingRegisterOutstandingBalances  | sort:'sequenceNo'"
[value]="billingRegisterOutstandingBalance.id"
[disabled]="billingRegisterOutstandingBalance.selected">
  {{ billingRegisterOutstandingBalance.sequenceNo +' | '+ billingRegisterOutstandingBalance.description1}}
</mat-option>
user_27011980
Related