Mat Select未获得选定值角度6 TS

Question

Mat Select is not set selected value when I do update operation. I want to show selected value when I click on update so other textboxes are getting correct value but mat-select doesn't, If I replace mat-select with simple textbox so it's getting correct value.

HTML

 <mat-select placeholder="Please Select" name="FD_Financials_year_end_date" #FD_Financials_year_end_date="ngModel"
                  [(ngModel)]="objCompanyFinancialDetails.FD_Financials_year_end_date" class="form-control">
                    <mat-option *ngFor="let date of FinancialYearEndDate" [(value)]="date.id">
                      {{date.value}}
                    </mat-option>
                  </mat-select>

TS

FinancialYearEndDate = [
    { id: "01", value: "01" },
    { id: "02", value: "02" },
    { id: "03", value: "03" },
    { id: "04", value: "04" },
    { id: "05", value: "05" },
    { id: "06", value: "06" },
    { id: "07", value: "07" },
    { id: "08", value: "08" },
    { id: "09", value: "09" },
    { id: "10", value: "10" },
    { id: "11", value: "11" },
    { id: "12", value: "12" },
    { id: "13", value: "13" },
    { id: "14", value: "14" },
    { id: "15", value: "15" },
    { id: "16", value: "16" },
    { id: "17", value: "17" },
    { id: "18", value: "18" },
    { id: "19", value: "19" },
    { id: "20", value: "20" },
    { id: "21", value: "21" },
    { id: "22", value: "22" },
    { id: "23", value: "23" },
    { id: "24", value: "24" },
    { id: "25", value: "25" },
    { id: "26", value: "26" },
    { id: "27", value: "27" },
    { id: "28", value: "28" },
    { id: "29", value: "29" },
    { id: "30", value: "30" },
    { id: "31", value: "31" }
  ];

Answer 1

You May want to check if the value you're trying to bind to your select , in this case "objCompanyFinancialDetails.FD_Financials_year_end_date", is present in the possible values of your options

You may also want to replace your mat select component by a simpler definition:

<mat-select [(value)]='selectedDate'>
   <mat-option></mat-option>
</mat-select>

Answer 2

You should bind same property to [(ngModel)] and [(value)] . In your case, [(ngModel)] is complete object of date and [(value)] is id of that object. Code should be as below

<mat-select placeholder="Please Select" name="FD_Financials_year_end_date" #FD_Financials_year_end_date="ngModel"[(ngModel)]="objCompanyFinancialDetails.FD_Financials_year_end_date.id" class="form-control">
                    <mat-option *ngFor="let date of FinancialYearEndDate" [value]="date.id">
                      {{date.value}}
                    </mat-option>
                  </mat-select>