2

Tengo un conjunto de botones cada uno representa una opción de un listado de selección con búsqueda y lo que quiero conseguir es que al hacer click en algún botón dicha opción se seleccione en el listado. Sería como una especie de filtro o atajo para elegir una opción del listado.

Al hacer click en cada uno de los botones y desplegar la lista se selección la opción y el valor de la forma va cambiando pero no se cambia la leyenda del input. Es un problema de visualización.

Agradecería enormemente si alguien puede ayudarme a encontrar cuál es el problema y como corregirlo. Soy nueva usando angular así que pido disculpas de antemano si estoy cometiendo algún error de principiante pero ya intentado de todo y no he podido solucionarlo.

Si utilizo un listado de selección común funciona perfectamente pero necesito lograr este comportamiento con un listado de selección con búsqueda ya que lo utilizaré mucho en este proyecto.

Muchas gracias!

Estoy usando Angular 8, Bootstrap v4.3.1, bootstrap-select v.1.13.9 (https://developer.snapappointments.com/bootstrap-select/)

  • formularioreactivo.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-formularioreactivo',
  templateUrl: './formularioreactivo.component.html',
  styles: []
})
export class FormularioreactivoComponent {

  forma: FormGroup;

  zonas: any[] = [
    {
      codigo: 1,
      zona: 'zona 1',
    },
    {
      codigo: 2,
      zona: 'zona 2',
    },
    {
      codigo: 3,
      zona: 'zona 3',
    },
    {
      codigo: 4,
      zona: 'zona 4',
    },
    {
      codigo: 5,
      zona: 'zona 5',
    },
  ];

  constructor() {
    this.forma = new FormGroup({
      zona: new FormControl(this.zonas[2] ),
    });
    }

    recargarZona( zona: any ) {
      this.forma.setValue({ zona });
    }

}
  • formularioreactivo.component.html
<div class="btn-group" role="group" aria-label="Basic example">
    <button *ngFor="let zona of zonas" type="button" class="btn btn-secondary" (click)="recargarZona(zona)"> {{ zona.zona }} </button>
</div>


<form [formGroup]="forma" class="mt-5">
    <select class="selectpicker" data-live-search="true" formControlName="zona">
        <option *ngFor="let zona of zonas" [ngValue]="zona">
            {{ zona.zona }}
        </option>
    </select>
</form>

<br>

<p>Form value: {{ forma.value | json }}</p>

  • app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { FormularioreactivoComponent } from './components/formularioreactivo/formularioreactivo.component';

@NgModule({
  declarations: [
    AppComponent,
    FormularioreactivoComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

8
  • El plugin que mencionas requiere jQuery y tu estas usando Angular
    – devconcept
    el 29 ago. 2019 a las 14:12
  • Gracias por responder. El listado de selección con búsqueda funciona. Lo que no logro solucionar es que al hacer click en un botón se visualice alguna de las opciones del listado. el 29 ago. 2019 a las 14:36
  • Porque esas opciones no son las de tu select, al que está enlazado el formulario, sino a elementos dinamicos generados por tu plugin. Esto es fácil de entender si sabes que estilar un elemento select es casi imposible por lo que hay que simular su apariencia usando elementos regulares. Eso es lo que hacen todos los plugins que generan select customizados.
    – devconcept
    el 29 ago. 2019 a las 14:46
  • Claro ahora entiendo. Tendrías alguna sugerencia de como lograr el comportamiento que necesito o de plano no podré conseguirlo usando select customizados y angular ? el 29 ago. 2019 a las 14:57
  • honestamente creo que deberías cambiar a Material. Las librerías que usan bootstrap no han podido mantener el ritmo de evolución de Angular. Aquí tienes un ejemplo del componente que necesitas material.angular.io/components/autocomplete/…
    – devconcept
    el 29 ago. 2019 a las 15:01

2 respuestas 2

-1

No estoy seguro si es lo que buscas, pero he echo una prueba y sin importar donde hago los cambios, tanto con botones como con el listado de los datos en el <p> se cambian. Lo que descubrí, es que en tu app.modules.ts no hay esto:

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

Al probar cuando lo borro, el comportamiento cambia, y no funciona correctamente.

-1

tu variable forma es un FormGroup debes buscar el FormControl dentro y actualizar el valor

recargarZona( zona: any ) {
   this.forma.get('zona').setValue(zona);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.