Início / coding / Perguntas / 77887182
Accepted
newby73
Asked: 2024-01-26 23:11:17 +0800 CST

Angular Material - Desative o elemento de opção suspensa única com base na seleção

  • 772

Eu tenho um menu suspenso Angular Material e preciso desabilitar elementos específicos desse menu suspenso, com base no valor selecionado em outro menu suspenso.

Aqui está o HTML para os dois menus suspensos:

<mat-form-field>
    <mat-label>Choose an option</mat-label>
    <mat-select id="lineOfBusiness" formControlName="lineOfBusiness">
        <mat-option value="commercial">Commercial</mat-option>
        <mat-option value="residential" >Residential</mat-option>
        <mat-option value="industrial">Industrial</mat-option>
    </mat-select>
</mat-form-field>


<mat-form-field>
    <mat-label>Choose an option</mat-label>
    <mat-select id="psv" formControlName="psv">
        <mat-option value="inclinometer">Inclinometer</mat-option>
        <mat-option value="heil" >Heil</mat-option>
        <mat-option value="radar">Radar</mat-option>
        <mat-option value="hydraulics">Hydraulics</mat-option>
        <mat-option value="coretex">Coretex</mat-option>
    </mat-select>
</mat-form-field>

Por exemplo, a lógica seria mais ou menos assim: Se 'lineOfBusiness' = 'comercial', então no menu suspenso 'psv', 'radar' deve ser desabilitado.

No meu arquivo form.component.ts, tenho esta função, que está sendo executada sem erros, mas não está desativando as opções necessárias.

disableOption(optionValue: string): void {
    console.log("Disabling " + optionValue);
    const psvControl = this.reactiveForm.get('psv');
    if (psvControl) {
        const option = psvControl.get(optionValue);
        if (option) {
            option.disable();
        }
    }
}

O que estou fazendo de errado?

angular

1 respostas

  1. Best Answer

    Conceito chave:

    1. Obtenha o elemento DOM MatSelect para psvcontrole por meio da variável de referência do modelo.

    2. Assine o lineOfBusinesscontrole valueChangespara disparar o disableOptionmétodo quando o lineOfBusinessvalor for alterado.

    3. Desative a opção mat quando o valor "comercial" for selecionado para o lineOfBusinesscontrole e vice-versa.

    import { Component, ViewChild } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { MatSelect } from '@angular/material/select';

private destroy$ = new Subject();

@ViewChild('psvSelect') psvSelect!: MatSelect;


ngAfterViewInit() {
  this.reactiveForm.controls.lineOfBusiness.valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe((value) => {
      this.disableOption(value);
    });
}

disableOption(optionValue: string): void {
  console.log('Disabling ' + optionValue);

  if (optionValue === 'commercial')
    this.psvSelect.options.find((x) => x.value == 'radar')!.disabled = true;
  else
    this.psvSelect.options.find((x) => x.value == 'radar')!.disabled = false;
}

ngOnDestroy() {
  this.destroy$.next(true);
  this.destroy$.complete();
}

    Você precisa declarar a variável de referência do modelo #psvSelectconforme abaixo:

    <mat-select id="psv" formControlName="psv" #psvSelect>
    ...
</mat-select>

    Demonstração @ StackBlitz

    • 1

relate perguntas