Dropdown selected value not setting in edit mode Angular 10

Question

In the edit mode of the form, the value from the database is not selected. I get the correct value in 'service.formData.SalesRepId', but somehow it is not selected. Am I missing something?

below is the code

    <select 
      #select name="SalesRepId" 
      #SalesRepId="ngModel" 
      [(ngModel)]="service.formData.SalesRepId" 
      class="form-control">
          <option value="">-Select-</option>
          <option 
             *ngFor="let rep of this.service.staffUsers" 
             [value]="rep.UserId">
                {{rep.FullName}}
          </option>
    </select>

Below is the type-script which retrieves the data. On the console log, I get all the correct SalesRepId

this.bsModalRef = this.bsModalService.show(EditSurveyRequestComponent, { class: 'modal-xl' });
    (<EditSurveyRequestComponent>this.bsModalRef.content).isUserRoleAdminFromParent = this.nav.isUserRoleAdmin;
    this.service.getSurveyRequestDetailsById(SurveyRequestId).subscribe(data => {
      this.service.formData = data as SurveyRequests;
      console.log(this.service.formData.SalesRepId);
    })

Can you add the typescript code for adding such value to the control select? — Andres2142, Feb 22 '21 at 14:32
I got the root cause of the issue, but have no idea yet how to resolve this. In my case [(ngModel)] text exceeds 30 characters and is truncated. This way now the option value does not match and the problem. https://stackoverflow.com/questions/59315845/ng-reflect-model-show-incorrect-value-but-the-input-is-right?rq=1 — bikram s., Feb 22 '21 at 17:11
Even limiting the characters count to 30 did not help. This is possibly due to the dropdown is inside a modal dialog. The modals open from the edit button against each row in a datatable. So, I feel this is related to some modal scope issue. — bikram s., Feb 24 '21 at 03:38

score 0 · Answer 1 · edited Feb 22 '21 at 15:58

I would suggest you to store the value in a variable say rapidValue and then use the [{ngModel}] in the html .

rapidValue: string;

this.bsModalRef = this.bsModalService.show(EditSurveyRequestComponent, { class: 'modal-xl' });
    (<EditSurveyRequestComponent>this.bsModalRef.content).isUserRoleAdminFromParent = this.nav.isUserRoleAdmin;
    this.service.getSurveyRequestDetailsById(SurveyRequestId).subscribe(data => {
      this.service.formData = data as SurveyRequests;
      rapidValue = this.service.formData.SalesRepId;
    })

in the html use -

<select 
  #select name="SalesRepId" 
  #SalesRepId="ngModel" 
  [(ngModel)]="rapidValue" 
  class="form-control">
      <option value="">-Select-</option>
      <option 
         *ngFor="let rep of this.service.staffUsers" 
         [value]="rep.UserId">
            {{rep.FullName}}
      </option>
</select>

Dropdown selected value not setting in edit mode Angular 10

1 Answers1