CODEWITHSUNDEEP
angularangular-material
Evangelous Glo
Evangelous Glo

Reputation: 59

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

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

Upvotes: 2

Views: 1533

Answers (1)

cabesuon
cabesuon

Reputation: 5270

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>

Upvotes: 1

Related Questions