Angular Material Mat-Select Mat-Error. After selection, the binded value is empty

Question

I got the Angular Material Mat-Select dropdown almost working for binding the selected dropdown value to the object property. However, When I check in the callback function to check on the object property value, it is blank. When the object property value is blank, it triggers the mat-error which shows the red error message. I added a doSomething function to check on the dropdown value and the value from (valueChange) is blank and the object property field is also blank.

I looked at the examples on the material site but nothing is giving a clue on what is the issue with my code. Hoping someone can help. Thanks.

<mat-select [(ngModel)]="myObject.Record.code" 
                                [disabled]="!myObject.required"

                                (valueChange)="doSomething($event)"

                                [formControl]="myCtrl" required>
                      <mat-option [value]="myObject.Record.code">{{myObject.Record.code}}</mat-option>
                      <mat-option *ngFor="let option of options" 
                      [value]="option">{{reason.name}}</mat-option>
                    </mat-select>

c0micrage c0micrage · Accepted Answer · 2019-07-03T13:22:43

Sorry, After looking at the material site, I figure out my error, the following binded code fix is

Hope this help someone else.

Angular Material Mat-Select Mat-Error. After selection, the binded value is empty

1 Answers