Angular display data in select

Question

I'm using angular 7 and I want when I click in update User I get a page with all info about that user so I can update what I want, but on validator attribute I don't see the value of it from database.

This is my code:

<div fxFlex="50" class="pr-1">
        <mat-form-field class="full-width">
          <mat-select placeholder="Validator *" name="validator" [formControl]="indicateurForm.controls['validator']" class="mb-1">
            <mat-option *ngFor="let v of listValidators" [value]="v" ngDefaultControl>
              {{v?.firstName}} {{v?.lastName}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

if I use 'input' I got the result of the validator but on 'select' I got nothing display. Thanks in advance :)

What i see is {{v?.firstName}} {{v?.lastName}} means that v is object, I think you can't parse [value]="v" into selectBox value. — rcanpahali, Mar 14 '19 at 13:06
@shadowman_93 yeah I want display firstName and lastName and I want stock the whole object in database — Ragnar Lodbrok, Mar 14 '19 at 14:02

score 1 · Answer 1 · answered Mar 14 '19 at 13:08

1

As I undestand you can't parse [value]="v" into selectBox value,

      <div fxFlex="50" class="pr-1">
        <mat-form-field class="full-width">
          <mat-select placeholder="Validator *" name="validator" [formControl]="indicateurForm.controls['validator']" class="mb-1">
            //Try to parse value like id here, example [value]="v.id" 
            <mat-option *ngFor="let v of listValidators" [value]="v" ngDefaultControl> 
              {{v?.firstName}} {{v?.lastName}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

Update: I found this, Its exactly what you need. https://stackoverflow.com/a/35945293/5955138

It's telling that you need to use [ngValue] property like below,

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

answered Mar 14 '19 at 13:08

rcanpahali

2,565
2
21
37

I can't use [ngValue] cuz I don't use ngModel, I use [formControl], and I can't do [value]="v.id" coz If I do that the id who will display. so I think is impossible to display 2 attributes of an object and stock the all oubject :( – Ragnar Lodbrok Mar 14 '19 at 14:01
@RagnarLodbrok It seems like in this example, they used ngValue with mat-select, Can you please check it, https://stackoverflow.com/a/48197226/5955138 – rcanpahali Mar 14 '19 at 14:03
I got this error : Can't bind to 'ngValue' since it isn't a known property of 'mat-option'. I have already import { ReactiveFormsModule, FormsModule } from '@angular/forms'; but still same error; I must import just 1 but also not working – Ragnar Lodbrok Mar 14 '19 at 14:19

Angular display data in select

1 Answers1