Selected value do not change on setValue-CodePudding

I try to update select value in mat-select when I update form by setValue I can see that form has been updated and this.form.value equals to the user input but selected value is still empty.

<mat-select [formControl="form"]>
 <mat-option *ngFor="let item of items">....</mat-option>
 <mat-option> <input (keyup)="updateForm($event.target.value)" /></mat-option>
</mat-select>

form = new FormControl()

updateForm(value) { 
  this.form.setValue(value)
}

UPD 1.

Well I have found out that if I would mutate items array and add new value from input in array then select can see the new value. But it still bad way that I can see

CodePudding user response：

This part seems wrong [formControl="form"]. Please try it like this:

<mat-select [formControlName]="form">
  <mat-option *ngFor="....">....</mat-option>
  <mat-option> <input (keyup)="updateForm($event.target.value)" /> </mat-option>
</mat-select>

CodePudding user response：

Why not using 2-way binding to the value property? I think it's simple and doesn't require Angular forms Source: Angular Material

In your HTML:

<mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="object.item">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let item of listOfItems"
                 [value]="item">{{ item.desig }}
    </mat-option>
  </mat-select>
</mat-form-field>

CodePudding user response：

i think you missing value properties of

it should be <mat-option [value]="...">