Mat Select option cant get data

Question

I have this code where i can view the options but cant get the value when selecting it, it just shows blank. I can only view the status options.. Can anyone know how to fix the problem?

HTML File

  <div class="main-content" *ngIf="selectedTask">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header card-header-info">
                        <h4 class="card-title"><b>Update Form</b></h4>
                        <p class="card-category">Update Task Details</p>
                    </div>
                    <div class="card-body">

                            <div class="row">
                                <div class="col-md-12">
                                  <mat-form-field class="example-full-width">
                                    <mat-select placeholder="Select Category" [(ngModel)]="selectedTask.status">
                                        <mat-option *ngFor="let s of statusChoice" >{{s}}</mat-option>
                                    </mat-select>
                                  </mat-form-field>
                                </div>
                            </div>

                            
                            <div class="col-md-4">
                            <div class="text-left">
                              <button mat-raised-button class="btn btn-success btn-block" (click)="navigateBack()"  (click)="showNotification('top','center')" (click)="updateEmployee()" ><b>Update Task</b></button>
                              </div>
                            </div>
                            </div>

                            <div class="text-left">
                            <button type="button" (click)="navigateBack()" class="btn btn-dark btn-default"><b>Go Back</b></button>
                            </div>
                            <div class="clearfix"></div>
                          
                    </div>
                </div>
            </div>

        </div>
    </div>

  


  

TS File

statusChoice=["Active","Completed","Cancelled","On Hold"];
selectedStatus: string ='';

Answer 1

Your property is called selectedStatus, and you linked the mat-select to property selectedTask.status.

Also, you should add value to the mat-option.

Change your code like this:

<mat-select placeholder="Select Category" [(ngModel)]="selectedStatus">
  <mat-option *ngFor="let s of statusChoice" [value]="s">{{s}}</mat-option>
</mat-select>