Início / user-19271854

newby73's questions

Martin Hope
newby73
Asked: 2025-04-21 21:17:08 +0800 CST
  • 7

Contexto:
Tenho um componente Angular que renderiza um campo de preenchimento automático do Angular Material . O campo tem três opções, e cada opção contém um namee um id. Quando uma opção é selecionada, seu namecampo deve ser exibido no campo.

Problema:
Quando uma opção é selecionada inicialmente, o namecampo é exibido conforme o esperado. No entanto, quando a mesma opção é selecionada novamente, mesmo já estando selecionada, o idcampo exibe o campo. O campo nameexibe o campo da opção selecionada, e não o campo id.

Pergunta
Como isso pode ser corrigido para que, independentemente de quantas vezes uma opção seja selecionada, o namecampo seja sempre exibido, e não o idcampo?

StackBlitz

TS

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatAutocompleteModule,
  MatAutocompleteSelectedEvent,
} from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';

interface Item {
  id: string;
  name: string;
}

@Component({
  selector: 'app-autocomplete',
  standalone: true,
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, FormsModule, MatAutocompleteModule, MatInputModule],
})
export class AutocompleteComponent {
  options: Item[] = [
    { id: '1', name: 'Item One' },
    { id: '2', name: 'Item Two' },
    { id: '3', name: 'Item Three' },
  ];
  name: string = '';
  id: string = '';
  placeholder: string = 'Select an option';

  resetField() {
    this.name = '';
  }

  selectionChange(e: MatAutocompleteSelectedEvent) {
    this.name = e.option.viewValue;
    console.log(e.option.viewValue); // name
    console.log(e.option.value); // id
  }
}

HTML

<mat-form-field>
  <mat-label>{{ placeholder }}</mat-label>
  <input
    #assetInput
    type="text"
    [placeholder]="placeholder"
    matInput
    [(ngModel)]="name"
    [matAutocomplete]="auto"
  />
  <mat-autocomplete
    #auto="matAutocomplete"
    (optionSelected)="selectionChange($event)"
  >
    <mat-option *ngFor="let option of options" [value]="option.id">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
angular
Martin Hope
newby73
Asked: 2024-01-26 23:11:17 +0800 CST
  • 5

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