Ng-reflect-model shows correct value but not reflecting in mat select

[Akhilkotha]

    <mat-label class="col-sm-4 col-form-label" >Crop Type  <span  class="required-asterisk">*</span></mat-label>  
        <div class="col-sm-10">  
       <mat-select   placeholder="Select Crop Type" [(ngModel)]="cropname"  class="select" formControlName="croptype">
            <mat-option *ngFor = "let i of Croptype"  [value] = "i">{{i.CropName}}</mat-option> 
       </mat-select>
        When i tried to use two way binding to bind dynamic value to ngmodel, ng-reflect-model is updating correct value,but view is not getting updated.
In component.ts 
Croptype = [ { CropID: '1', CropName: 'sweetlime', ScientificName: 'CitrusImetta' }, ]; this.cropname=newsortOrder != undefined ? newsortOrder.cropName : '';
 when iam updating ngmodel value with below line the above issue occurs 
Example for issue:https://stackblitz.com/edit/angular-be1gqv?file=src%2Fapp%2Fapp.component.ts

[bradtaniguchi]

Hello @Akhilkotha welcome to the forums!

So I see your using Angular, but your post is rather hard to read. From what I get you have this:

<mat-form-field>
	<mat-label class="col-sm-4 col-form-label">Crop Type <span  class="required-asterisk">*</span></mat-label>
	<mat-select placeholder="Select Crop Type" [(ngModel)]="cropname" class="select">
		<mat-option *ngFor="let i of Croptype" [value]="i">{{i.CropName}}</mat-option>
	</mat-select>
</mat-form-field>
<!-- took parts of the missing code from the reproduction -->

You also have a reproduction of the issue here:

angular-be1gqv - StackBlitz

I’ll be taking snippets of code from the reproduction, as not everything you posted explains the underlying issue.

And your saying the the ngModel get’s updated, but the UI doesn’t change correctly. My guess is

---

So the issue your seeing is due to how ngModel compares values, and how your passing data around.

1. Your setting cropname in the append function as lime. Which wont be matched via NgModel as it will be comparing all the values in your Croptype array to your new value lime with the { CropID: '1', CropName: 'sweetlime', ScientificName: 'CitrusImetta' }, which will always be false

2. There is a compareWith property you can pass to the mat-select (as mentioned here in the docs) that you can pass a reference to a function that can be used to compare objects using a nested value (probably the CropID)

3. I suggest you set the CropID and save just the CropID to the field (by using [value]="i.CropID"). This might have some side-effects where the CropID isn’t found in the array, so the alternative is to keep [value]="i" which will save the entire reference to the Croptype to your cropname variable.

This all might be kinda confusing, so I made a working fork using stackblitz. This uses the first approach I mentioned in 3, where the value is saved as an id. This means the value passed to ngModel will match by CropID.
I also renamed a number of variables and added more typing, as the naming conventions used were confusing.

mat-select-reproduction-fix - StackBlitz

[Akhilkotha]

Hello @ bradtaniguchi, Thanks for reply.
You are adding other array of object to crop types and changed [value]=" i " to [value]=“i.CropID”. But based on our requirement we need to get complete object value to be stored in [Value]. And on click event the value appending to ngmodel should be dynamic variable value which is coming from Api(only variable value not as object), so as it is not possible to get dynamic value,i appended static value as “lime”.
So can you please tell me how to do this without adding other array of object to Croptype array(Should append dynamic value to matselect ngmodel on click of button)

[bradtaniguchi]

If you need to save the entire object reference you can use the compareWith attribute of mat-select to compare object values by their CropID. This also means when you set the value it should be an object at least with the CropID property that is to be matched with the values

So you’ll have [value]="i" or, if you used my version: [value]="cropType"
and uncomment/use the compareFn that I had in my demo component.