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

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