获取返回值[object Object]以获取第一个结果的下拉列表。 当我选择一个选项并且有效时它会改变。 如何修复默认结果

Question

I have an angular 7 application. I have called services to fetch mysql data. In a form I want to populate a dropdown and want to validate it. But the dropdown always has an undefined value at first so i cannot validate it with required. Why does it have an [object Object] at first? But it works when i properly select a value.

I have used it in a component and works great using the code below

Component.ts file

this.employeeservice.retrieveAllTodos().subscribe(
  response => {
    this.employeesList = response;
    console.log("it works");
  }
);

<select class="custom-select custom-select-sm" [class.ng-invalid]="!ecode.value" name="ecode" #ecode="ngModel" required [ngModel]="ecode" (ngModelChange)="getId($event,ecode.value)">

  <option *ngFor="let todo of employeesList" value={{todo.employeeCode}}>{{todo.employeeCode}} - {{todo.employeeName}}</option>

</select>
<div *ngIf="ecode.errors && (ecode.dirty || ecode.touched || todoForm1.submitted)">

  <div *ngIf="ecode.errors.required">
    <small class="form-text text-muted">Please select code</small>
  </div>
  <div *ngIf="ecode.invalid">
    <small class="form-text text-muted">Please select code1</small>
  </div>


</div>

<pre> {{ecode.value}}</pre>
<pre *ngIf="ecode.value === null">no value</pre>

https://imgur.com/OjSF2Wv https://imgur.com/JY7zhYD

I have included 2 pictures of my situation

Answer 1

The issue is with this "[ngModel]="ecode"" looks like ecode is an object

Change this to "[ngModel]="ecode.value"" .It should work