Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material Mat-Select ngModel boolean Value Not working

I use mat-select To select a user's gender in angular 7 project and angular material

 <mat-form-field>
          <mat-select placeholder="Gender" required 
            formControlName="isMale" 
            [(ngModel)]="userProfile.isMale">
            <mat-option value="false">Women</mat-option>
            <mat-option value="true">Men</mat-option>
          </mat-select>
          <mat-hint align="end">Please Select...</mat-hint>
          <mat-error *ngIf="isControlHasError('isMale','required')"><strong>Please Select Gender</strong>
          </mat-error>
        </mat-form-field>

userProfile get from server and isMale property is boolean type but after get data do not show selected value on mat-select I Also use this way but not work

        <mat-option [value]="'false'">Women</mat-option>
        <mat-option [value]="'true'">Men</mat-option>

but it doesn't work

like image 765
Mostafa Bagheri Avatar asked Sep 02 '25 15:09

Mostafa Bagheri


1 Answers

This has worked for me (I am using Angular 8)

   <mat-form-field>
    <mat-select [(ngModel)]="userProfile.isMale">
      <mat-option [value]="true">Men</mat-option>
      <mat-option [value]="false">Women</mat-option>
    </mat-select>
  </mat-form-field>

Note that I used [value] = "true or false" without any single cotes. Obviously, userProfile.isMale should be boolean (true or false).