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).


Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!