3

estoy iniciando en Angular y Firebase y me encontre con una cuestión: Como puedo hacer para que un select envie el valor seleccionado por un lado y el id del valor hacia otro doc. Basicamente tengo 2 documentos (tablas) de firestore, en una tengo los productos y en otra los movimientos. Lo que requiero hacer es enviar el id del producto que selecciono a un campo de la tabla movimientos y el nombre a otro campo.

Hasta ahora tengo este codigo pero no funciona

Codigo en el html: (listaprod es la lista que viene del controlador)

<select class="form-control col-sm-6" id="nomProd" [(ngModel)]="entradaTemp.nomProd" name="nomProd">
   <option *ngFor="let prod of listaprod | async">
      {{prod.nombre}} 
      <span name="idProd" id="idProd" [(ngModel)]="entradaTemp.idProd">{{prod.id}}</span>
   </option>
</select>

Cuando saco el span todo funciona correctamente me permite seleccionar, me muestra la seleccion y lo graba en el registro de entradas, pero lo que no puedo es grabar el nombre e id en el registro de entradas.

4
  • Hola Marcelo! Te doy la bienvenida a Stack Overflow en español, por favor termina el recorrido de bienvenida para que puedas ganar tu primera medalla :D
    – user22721
    el 24 jun. 2018 a las 4:34
  • Hola y muchas gracias por la bienvenida, en realidad el titulo deberia decir Como obtengo de un select 2 datos, el id y el nombre del producto. Ambos datos se encuentran en el option pero no puedo lograr separarlos en por ejemplo dos variables distintas. Nuevamente muchas gracias y saludos cordiales. el 25 jun. 2018 a las 23:48
  • Muchas gracias Sebastian Excelente solucion con los formularios reactivos, son muy potentes y la verdad conocia de su existencia pero no me habia documentado. Muchas gracias por el link y la solución. el 22 ago. 2018 a las 13:09
  • @MarceloLavandeira si existe una respuesta que ayudo a solucionar el problema puedes marcarla como aceptada, revisa el recorrido de bienvenida.
    – Jorgesys
    el 22 ago. 2018 a las 14:47

2 respuestas 2

0

El uso del ngModel no es necesario. Puedes encontrar muchas más ventajas al realizarlo con formularios reactivos. Si quieres aprender más, aquí te dejo los docs oficiales:

https://angular.io/guide/forms

Solución

  1. Debes tener los datos en un array que vas a recorrer en el select.
  2. Crea un formulario reactivo para el select.
    • El formulario reactivo contendrá dos controles, uno para el id y otro para el nombre
    • En la vista solo llamas el control id
    • Sería algo así <select formControlName="id"><option *ngFor="const item of data">....</option> </select>
  3. Escuchas los cambio de ese control form.get('option').valueChanges.subscribe((value) => { // cambias el valor del control name // Filtras el valor del id para encontrar el nombre const itemFilter = data.filter((item) => item.id === value) this.form.get('name').setValue(itemFilter.name); }
0

Puedes darle [ngValue]="prod" de esa forma, el valor sera el objeto completo y podras obtener los valores que tu necesites del objeto.

Tu Respuesta

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

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