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 ='';>Solution :
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>