Как отключить кнопку до выбора данных в выпадающем списке в Angular

Question

У меня есть простой шаблон, который включает в себя комбинированный список, кнопку и таблицу.Что я хочу сделать, так это то, что кнопки не активируются, если значение в выпадающем списке не выбрано, и после выбора эта кнопка вызовет метод обслуживания, получит сведения о работодателе, и таблица станет видимой после этого.и кнопка нажата.) Мой код:

 <mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayoutGap="30px">

          <mat-form-field fxFlex="30%">
            <mat-select placeholder="Choose Employer"
                        [(ngModel)]="customModel"
                        #activeEmployers="ngModel"
                        required>
              <mat-option *ngFor="let emp of employerList" [value]="emp.displayName">{{emp.displayName}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
          <button type="button" class="get-button" (click)="getEmployers()">
            GET DETAILS
          </button>
        </mat-card-actions>
      </mat-card>

      <mat-card>
        <mat-card-content>
          <mat-table #table [dataSource]="employerList">
            <!-- table rows -->

            <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row class="table-row" *cdkRowDef="let config; columns: displayedColumns;"></mat-row>

          </mat-table>
        </mat-card-content>
      </mat-card>

этот шаблон работает, но статический, все компоненты видны по умолчанию.Как я могу сделать ту функциональность, которую я упомянул выше.

Примечание: все эти элементы находятся в одном компоненте в файле TS.Таким образом, нет никаких родительских отношений и т.д.

Answer 1

Я бы предложил следующее:

В вашем элементе select используйте директиву change.Если происходит изменение, метод onSelection() запускается.Метод устанавливает логическое значение selectionFired в true.Если это происходит, кнопка активируется.[disabled]="!selectionFired"

Если вы нажмете кнопку, логическое значение buttonClicked будет установлено в true, и это позволит таблице появиться.*ngIf="buttonClicked"

<mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayoutGap="30px">

      <mat-form-field fxFlex="30%">
        <mat-select placeholder="Choose Employer"
                    [(ngModel)]="customModel"
                    #activeEmployers="ngModel"
                    (change)="onSelection()"
                    required>
          <mat-option *ngFor="let emp of employerList" [value]="emp.displayName">{{emp.displayName}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      <button type="button" class="get-button" [disabled]="!selectionFired" (click)="getEmployers()">
        GET DETAILS
      </button>
    </mat-card-actions>
  </mat-card>

  <mat-card>
    <mat-card-content>
      <mat-table *ngIf="buttonClicked" #table [dataSource]="employerList">
        <!-- table rows -->

        <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row class="table-row" *cdkRowDef="let config; columns: displayedColumns;"></mat-row>

      </mat-table>
    </mat-card-content>
  </mat-card>

И в вашем TypeScript-файле

  protected selectionFired: boolean = false;
  protected buttonClicked: boolean = false;

  protected onSelection(): void {
      this.selectionFired = true;
  }

  protected getEmployers(): void {
      this.buttonClicked = true;
  }