I am trying to default select an option which contains a "null" [value] in a mat-select. The problem is, it does not select the option with the "null" [value] when the html is displayed. I am using Angular 7 Reactive Forms with Angular Material 7. Here is what I have -
Html:
<mat-select placeholder="User" formControlName="userId">
<mat-option [value]="null">None</mat-option>
<mat-option *ngFor="let user of users" [value]="user.userId">
{{ user.name }}
</mat-option>
</mat-select>
Component.ts:
this.userId.setValue(null);
The line above assumes that I have already instantiated my formGroup with one of the formControls being called "userId" and "this.userId" is a property of my component which references "this.userForm.get('userId')".
So when I set the formControl value of "userId" to null nothing is ever selected in the html. I was under the impression that you can have a "null" value as one of the options of a mat-select, Am I wrong? If not, any suggestions on what I can do to get this to work the way I want.
Thanks!