Select in Angular 6 - take data from one doc firestore and pass it to another doc

Question

Select in Angular 6 - take data from one doc firestore and pass it to another doc

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm starting in Angular and Firebase and I found an issue: How can I make a select to send the selected value on one side and the id of the value to another doc. Basically I have 2 documents (tables) of firestore, in one I have the products and in another the movements. What I need to do is send the id of the product that I select to a field in the movements table and the name to another field.

So far I have this code but it does not work

Code in the html: (listaprod is the list that comes from the controller)

<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>

When I take out the span everything works correctly it allows me to select, it shows me the selection and it records it in the record of entries, but what I can not do is record the name and id in the record of entries.

html5 angular html-select google-cloud-firestore

asked by Marcelo Lavandeira 24.06.2018 в 04:51

source

2 answers

linq query on 2 group by lists Error compiling OpenGL project

score 0 · Answer 1

The use of ngModel is not necessary. You can find many more advantages when doing it with reactive forms. If you want to learn more, here are the official docs:

link

Solution

You must have the data in an array that you will go through in the select.

Create a reactive form for the select.

The reactive form will contain two controls, one for the id and one for the name
In the view you just call the control id
It would be something like that <select formControlName="id"><option *ngFor="const item of data">....</option> </select>

You hear the change of that 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);
}

score 0 · Answer 2

0

You can give [ngValue]="prod" of that form, the value will be the complete object and you will be able to obtain the values that you need from the object.

answered by 17.08.2018 в 04:11