Как привязать данные к множественному выбору?

Question

У меня есть редактируемая форма, которая содержит поле множественного выбора с массивом объектов, который мне нужно заполнить предыдущими данными, выбранными в этом массиве.

this.EditSplitConfigForm.patchValue({
    cecadtEventTypes: editSplitConfigModal.cecadtEventTypes
});

 <select class=" form-control dropdown-primary"  formControlName="cecadtEventTypes" multiple>
    <option>--select--</option>
    <option>All</option>
    <option *ngFor="let adtEvent of adtEventList" [ngValue]="adtEvent.id">
        {{adtEvent.adtEvent}}
    </option>
</select>

Answer 1

используйте ngx-mat-select-search: Пример использования: https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.html

Answer 2

Вам нужно исправить с массивом значений.Пожалуйста, ознакомьтесь с этим демонстрационным URL , вот пример кода.

form: FormGroup;
    constructor(private fb: FormBuilder){
        this.form = fb.group({
            cecadtEventTypes: []
        })  
    }

    changeSelection(): void {
        this.form.patchValue({
            cecadtEventTypes: [1,2,3]
        })
    }

    // html
    <form [formGroup]="form">
        <select formControlName="cecadtEventTypes" multiple="multiple" style="height: 120px;width: 20%">
            <option>--select--</option>
            <option>All</option>
            <option *ngFor="let item of adtEventList" [ngValue]="item.id">{{ item.adtEvent }}</option>
        </select>
    </form>
    <button type="button" (click)="changeSelection()">Change</button>