Como Obter a Nova Seleção em um Elemento Select no Angular

Neste artigo você aprenderá a como obtetr a nova seleção em um elemento Select no Angular, uma ação bem comum em forms

Fala programador(a), beleza? Bora aprender mais sobre Angular!

O Angular, um framework de aplicação web amplamente usado, fornece uma abordagem declarativa para construir interfaces de usuário.

Uma das funcionalidades comuns em aplicações web é a utilização de listas suspensas, e o Angular facilita a manipulação de eventos e dados associados a essas listas.

Este artigo irá guiá-lo através do processo de obtenção do valor selecionado em um elemento select usando Angular.

Introdução aos Formulários Angular

Antes de mergulharmos nos detalhes de como obter uma nova seleção em um elemento select, é importante entender como os formulários funcionam no Angular.

Existem dois tipos de formulários no Angular: os formulários reativos e os formulários baseados em template. Neste artigo, focaremos nos formulários reativos por sua flexibilidade e poder.

Configurando o Ambiente

Para começar, você precisa ter o Angular CLI instalado em seu sistema. Se ainda não tiver instalado, você pode fazê-lo executando:

npm install -g @angular/cli

Em seguida, crie um novo projeto Angular com:

ng new meu-projeto
cd meu-projeto

Adicione o módulo de formulários reativos ao seu módulo da aplicação:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
})
export class AppModule {}

Criando um Formulário Reativo

Agora, você está pronto para criar um formulário reativo. Primeiro, importe FormGroup e FormControl em seu componente:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

Em seguida, crie um FormGroup com um FormControl associado ao seu elemento select:

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="meuFormulario">
      <select formControlName="meuSelect">
        <option *ngFor="let opcao of opcoes" [value]="opcao">{{ opcao }}</option>
      </select>
    </form>
    <p>Opção selecionada: {{ meuFormulario.get('meuSelect').value }}</p>
  `,
})
export class AppComponent {
  meuFormulario = new FormGroup({
    meuSelect: new FormControl(''),
  });

  opcoes = ['Opção 1', 'Opção 2', 'Opção 3'];
}

No exemplo acima, temos um formulário com um elemento select, e estamos utilizando o Angular Forms para vincular o valor do select ao nosso componente.

A lista de opções é gerada dinamicamente usando *ngFor, e o valor selecionado é exibido abaixo do formulário.

Obtendo o Valor Selecionado

Para obter o valor selecionado do select, você pode se inscrever nas mudanças do FormControl associado. Adicione o seguinte código no método ngOnInit do seu componente:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  // (...)
})
export class AppComponent implements OnInit {
  // (...)

  ngOnInit() {
    this.meuFormulario.get('meuSelect').valueChanges.subscribe((valorSelecionado) => {
      console.log('Valor selecionado:', valorSelecionado);
    });
  }
}

Com este código, sempre que o valor do select mudar, o novo valor será impresso no console.

Lidando com Objetos como Valores

Em alguns casos, você pode querer associar objetos inteiros às opções do seu select. Para fazer isso, você pode usar a diretiva [ngValue] em vez de [value]. Aqui está um exemplo:

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="meuFormulario">
      <select formControlName="meuSelect">
        <option *ngFor="let opcao of opcoes" [ngValue]="opcao">{{ opcao.nome }}</option>
      </select>
    </form>
    <p>Opção selecionada: {{ meuFormulario.get('meuSelect').value | json }}</p>
  `,
})
export class AppComponent {
  meuFormulario = new FormGroup({
    meuSelect: new FormControl(''),
  });

  opcoes = [
    { id: 1, nome: 'Opção 1' },
    { id: 2, nome: 'Opção 2' },
    { id: 3, nome: 'Opção 3' },
  ];
}

No exemplo acima, cada option no select está associado a um objeto inteiro, e o nome da opção é exibido na lista suspensa.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre como obter a nova seleção em um elemento Select no Angular!

Obter o valor selecionado de um elemento select no Angular é uma tarefa comum e essencial em muitas aplicações web. Usando formulários reativos, você pode facilmente vincular o valor do select ao seu componente e reagir a mudanças de maneira eficiente.

Além disso, lidar com objetos como valores de opções proporciona ainda mais flexibilidade, permitindo que você armazene e recupere mais informações sobre as opções selecionadas.

Lembrando sempre de manter o seu código limpo e bem estruturado, você estará no caminho certo para construir aplicações interativas e amigáveis com Angular.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.