Angular Material Mat-Select ngModel boolean Value Not working

Issue

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

Solution

finally i use this.postForm.controls['isMale'].setValue(profile.isMale?'true':'false'); after get model from server set manually mat-select and convert boolean to string

Answered By – Mostafa Bagheri

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.