Repopulating a select with previously selected options

Question

When a user creates a post, they have the ability to select from a list of potential users that the post can be sent to. Users are then allowed to edit the post, however, I am now dealing with two objects: one has a list of all potential users and the other a list of users that were selected when the post was created.

My question: When editing the post, how can I have it that all potential users are an option but the users selected at creation of the post are already selected?

<ion-select [(ngModel)]="post.To" [ngModelOptions]="{standalone: true}" multiple="true" cancelText="Cancel" okText="OK">
    <ion-option *ngFor="let member of members.PotentialPeople" [value]="member">
        {{ member.Name }}
    </ion-option>
</ion-select>

Are the users that were selected at creation saved as part of the post model/ available as part of that info when editing begins? — Erica Grant, Apr 16 '18 at 15:04
@EricaGrant Yes. On construction of the page, the entire post object is available. — askharley, Apr 16 '18 at 15:07
if you set the ngModel equal to post.To.members(or however that is nested) does it not populate the select section? Like if you had drop downs in a form you wanted to save and you bound them to your model like so [(ngModel)]="post.To.member" it would be populated if you went back in to edit it. — Erica Grant, Apr 16 '18 at 15:10
Are your and defined differently between create and edit? Are you using different components for edit and create or the same component? — Erica Grant, Apr 16 '18 at 15:18
The options are all of the potential options from `members.PotentialMembers`. So on creation, `post.To` is empty and is then filled with the selected options that the user chose. Then later on when the user wants to edit the post, the `post.To` object is still bound to the `select` but the options are still a list of all potential users. I need that list to be a list of all potential users with the users currently in `post.To` to be already selected. — askharley, Apr 16 '18 at 15:21
Okay this might be easier if you were using the same component and html for both create and edit, might also make it easier to maintain. With the list of potential members is it just a list of the names or is it a key pair, that includes a boolean, like: {name: member1, selected: true} — Erica Grant, Apr 16 '18 at 15:26
I am using the same HTML on both pages. Members is an object but the name of the member is displayed as an option, hence `member.Name`. — askharley, Apr 16 '18 at 15:29

Erica Grant · Answer 1 · 2018-04-16T17:12:27.740

I think what you are looking for is something like

[selected]="member.Name == potentialMember.Name"

<ion-option *ngFor="let member of members.PotentialPeople" [value]="member" [selected]="member.name == potentialMember.Name">

See Perrier's answer in the following post.

How to set default selected value of ion-option?

It sounds like you are saving a separate list when the the users creates a post of the users that were selected (different than the entire list of potential users).

So if you add [selected]="(user that is saved to post) == (all possible users)" that should pre-select the users that are already associated with the post on edit.

If this doesn't work please let me know. Thanks.

score 0 · Answer 2 · answered Apr 17 '18 at 08:18

So on the frontend, using [compareWith] allowed me to send the two objects to a function on the controller that would then compare the two objects.

On the template:

<ion-select [(ngModel)]="post.To" [ngModelOptions]="{standalone: true}" [compareWith]="compareObjects" cancelText="Cancel" okText="OK">
  <ion-option *ngFor="let member of members.PotentialPeople" [value]="member">
    {{ member.Name }}
  </ion-option>
</ion-select>

On the controller:

compareObjects(currentSelection, potentialSelection): boolean {
    return currentSelection && potentialSelection ? currentSelection.Id === potentialSelection.Id : currentSelection === potentialSelection;
}

Repopulating a select with previously selected options

2 Answers2