1

I am using Angular 7 and Angular Material. I want my to have a default value, but it is not working as expected. 

 <mat-select required [(value)]="userProfile.gender">
    <mat-option value="Male">Male</mat-option>
    <mat-option value="Female">Female</mat-option>
  </mat-select>

userProfile does have a property and the value is Male in my test case, but nothing is being selected in the html. What am I doing wrong?

dshukertjr
  • 15,244
  • 11
  • 57
  • 94

1 Answers1

2

I don't know why, but changing [(value)] to [(ngModel)] solved it

  <mat-select required [(ngModel)]="userProfile.gender">
    <mat-option value="Male">Male</mat-option>
    <mat-option value="Female">Female</mat-option>
  </mat-select>
dshukertjr
  • 15,244
  • 11
  • 57
  • 94
  • check this link for more details for using ngModel - https://stackoverflow.com/questions/47333171/angular-material-mat-select-not-selecting-default – Naga Sai A Jan 02 '19 at 17:27
  • You treat values/objects differently to a simple array of strings - see https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/ – Trujllo Jan 02 '19 at 17:30
  • Thanks to both of you – dshukertjr Jan 02 '19 at 17:31
  • 1
    @dshukertjr - This approach is not recommended if you are using Angular >=6. You will get the following warning in the console. It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. – Ali Celebi Mar 11 '20 at 09:02