I'm encountering an issue with my code where I can see the options but cannot retrieve the value when selecting one. It just displays blank. The problem seems to be related to viewing only the status options. Does anyone have a solution to fix this?
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 ='';