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

您需要使用值数组进行修补。请看看这个demo 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>

如何将数据绑定到多选？

2 个答案: