добавление проверки как в mat-checkbox, так и в mat-select в mat-table с помощью angular 8

Question

Я работаю над функцией, при которой, если пользователь выбирает оба флажка и выбирает раскрывающийся список, то на основании выбора я хочу уменьшить количество всех доступных лицензий (БЕСПЛАТНО или ПРЕДПРИЯТИЕ). Таким образом, чтобы справиться с этой ситуацией, можно проверить оба одновременно. У пользователя будут доступны как БЕСПЛАТНЫЕ планы, так и планы ENTERPRISE, и для продолжения подписки мы ограничили БЕСПЛАТНЫЕ планы, скажем, например. 10 и для ПРЕДПРИЯТИЯ планы говорят, например, для. 20. Если пользователь хочет использовать БЕСПЛАТНО доступные планы, тогда на основе выбора и флажок, и выбор раскрывающегося счетчика должны работать. Предположим, что если пользователь выбрал достаточно БЕСПЛАТНЫХ планов и, если он выберет БЕСПЛАТНО, то он не должен позволять пользователю выбирать. То же самое относится и к плану ENTERPRISE. Скажем, если пользователь использовал все БЕСПЛАТНЫЕ планы, он не должен позволять им выбирать БЕСПЛАТНЫЙ план, а счетчик должен go обнуляться. Пожалуйста, помогите мне в этом отношении.

См. Следующий код:

JSON ответ, где я получаю счет FREE и ENTERPRISE:

{
  "data":
  {
    "id":null,
    "createdBy":null,
    "createdDate":null,
    "modifiedBy":null,
    "modifiedDate":null,
    "version":null,
    "inactive":false,
    "orgFreePlan":null,
    "orgEntPlan":"ENTERPRISE",
    "availableFreeLicense":8,
    "purchaseFreeLicense":10,
    "availableEntLicense":14,
    "purchaseEntLicense":20,
    "usedFreeLicense":0,
    "usedEntLicense":6
  }
}

Компонент logi c для обработки планов FREE и ENTERPRISE:

/**
   * Subscription Plan method
   */
  subscriptionTierCall(){
    this.handler.activateLoader();
    this.projectService.getSubscriptionLicense().subscribe(results => {
      console.log(results)
      if (this.handler.handle(results)) {
        return;
      }
      this.handler.hideLoader();
      this.subscriptionTier = results['data']; 
      if(this.subscriptionTier.orgEntPlan == 'ENTERPRISE' && this.subscriptionTier.availableEntLicense !=0){
        this.newProject.planType = 'ENTERPRISE'
      }
      if(this.subscriptionTier.availableFreeLicense == 0){
        this.freeFlag = true;

      }

      if(this.subscriptionTier.availableEntLicense == 0){
        this.enterpriseFlag = true;
      }

      if(this.subscriptionTier.orgFreePlan == 'FREE')
      this.enterpriseFlag = true;


    }, error => {
      this.handler.hideLoader();
      this.handler.error(error);
    });
  }

Способ обслуживания:

getSubscriptionLicense() {
    return this.http.get(this.serviceUrl + "/" + "subscriptionLicense");

  }

Код шаблона:

<form [formGroup]="firstFormGroup" class="px-4">
    <mat-dialog-content class="mat-typography">
        <div class="box1 box-default">
            <div class="box-body">
                <div class=" box-default">
                    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 w-100" matSort
                        *ngIf="apiAccounts.length != 0">
                        <!-- Checkbox Column -->
                        <ng-container matColumnDef="select">
                            <th mat-header-cell *matHeaderCellDef>
                                <mat-checkbox (change)="$event ? masterToggle() : null"
                                    [checked]="selection.hasValue() && isAllSelected()"
                                    [indeterminate]="selection.hasValue() && !isAllSelected()" color="primary">
                                </mat-checkbox>
                            </th>
                            <td mat-cell *matCellDef="let row">
                                <mat-checkbox (click)="$event.stopPropagation()"
                                    (change)="$event ? selection.toggle(row) : null"
                                    [checked]="selection.isSelected(row)" color="primary">
                                </mat-checkbox>
                            </td>
                        </ng-container>
                        <!-- Position Column -->
                        <ng-container matColumnDef="position">
                            <th mat-header-cell *matHeaderCellDef>
                                <span *ngIf="accType === 'AWS'">Name</span>
                                <span *ngIf="accType === 'AZURE'">Name</span>
                            </th>
                            <td mat-cell *matCellDef="let element">
                                <span *ngIf="accType === 'AWS'">{{element.apiName}}</span>
                                <span *ngIf="accType === 'AZURE'">{{element.apiName}}</span>
                            </td>
                        </ng-container>

                        <!-- Name Column -->
                        <ng-container matColumnDef="name">
                            <th mat-header-cell *matHeaderCellDef>
                                <span *ngIf="accType === 'AWS'">Stage</span>
                                <span *ngIf="accType === 'AZURE'">Resource group</span>
                            </th>
                            <td mat-cell *matCellDef="let element">
                                <span *ngIf="accType === 'AWS'">{{element.stage}}</span>
                                <span *ngIf="accType === 'AZURE'">{{element.resourceGroupName}}</span>
                            </td>
                        </ng-container>

                        <!-- Stage Column -->
                        <ng-container matColumnDef="stage">
                            <th mat-header-cell *matHeaderCellDef>
                                <span *ngIf="accType === 'AWS'">Region</span>
                                <span *ngIf="accType === 'AZURE'">API Management service</span>
                            </th>
                            <td mat-cell *matCellDef="let element">
                                <span *ngIf="accType === 'AWS'">{{element.region}}</span>
                                <span *ngIf="accType === 'AZURE'">{{element.apiManagementServiceName}}</span>
                            </td>
                        </ng-container>

                        <!-- Plan Type Column -->
                        <ng-container matColumnDef="planTypes">
                            <th mat-header-cell *matHeaderCellDef>
                                <span>Plan Type</span>
                            </th>
                            <td mat-cell *matCellDef="let element">
                                <mat-form-field>
                                    <mat-select required placeholder="License" [value]="newProject.planType"
                                        name="subscriptions" formControlName="radioselect">
                                        <mat-option [disabled]="freeFlag" value="FREE">
                                            FREE ({{subscriptionTier.availableFreeLicense}} Of
                                            {{subscriptionTier.purchaseFreeLicense}})
                                        </mat-option>
                                        <mat-option [disabled]="enterpriseFlag" value="ENTERPRISE">
                                            ENTERPRISE ({{subscriptionTier.availableEntLicense}} Of
                                            {{subscriptionTier.purchaseEntLicense}})
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>

                            </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>

                </div>
                <h3 class="text-center text-primary" *ngIf="apiAccounts.length === 0"><i
                        class="fa fa-spinner fa-spin fa-2x" aria-hidden="true"></i></h3>
            </div>
        </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button mat-raised-button class="color-primary" [disabled]="isButtonEnable"
            (click)="register()">Register</button>
    </mat-dialog-actions>
</form>