Angular2-更新数据模型的表单值以进行多选

Question

I am using a multi-select package for my angular project. It allows me to bind to my reactive form model which is working fine.

On init of my component, I am storing the initial value from my model in a variable. I allow the user to enable "edit Mode" on my page which gives them the multi-select drop down.

In the event that they want to back out of any changes that they made (selected/removed), I need to re-set the initial value.

this.ruleAttributeForm.controls['AttributeValue'].setValue(this.initialValueInput, {emitEvent: true})

I tried to do something like this, which updates the model and the input box itself, however, when I open the dropdown, the values that were previously selected are still marked at selected even though they don't appear in the input.

<ng-select formControlName="AttributeValue" [items]="valueOptions" [multiple]="true" bindLabel="Value" placeholder="Select one or more values" class="test"></ng-select>

The values this input selects comes from formControlName and the items to pick from come from [items] . The .setValue appears to work for the model / input but isn't reseting which items are available to pick from (the ones I selected before I reset the control value are marked as in use).

Is there another way I should be handeling updating my form value or is this a plugin issue?

Answer 1

As per the docs , the each element of the list valueOptions passed to the items property should conform to the type NgOption below,

export interface NgOption {
    [name: string]: any;
    selected?: boolean;
    disabled?: boolean;
    label?: string;
    value?: string;
}

It has an optional boolean selected property. So try adding a selected property with its corresponding boolean value as default to each element of valueOptions array and then reset this property as well when you reset the formControl 's value.