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
– rcanpahali, Commented Mar 14, 2019 at 13:06
@shadowman_93 yeah I want display firstName and lastName and I want stock the whole object in database — Ragnar Lodbrok
– Ragnar Lodbrok, Commented Mar 14, 2019 at 14:02

rcanpahali · Accepted Answer · 2019-03-14 13:08:23Z

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, 2019 at 13:08

rcanpahali

2,6432 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ragnar Lodbrok Over a year ago

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

rcanpahali Over a year ago

@RagnarLodbrok It seems like in this example, they used ngValue with mat-select, Can you please check it, stackoverflow.com/a/48197226/5955138

Ragnar Lodbrok Over a year ago

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

Collectives™ on Stack Overflow

Angular display data in select

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related