1

我在将多选 html 元素绑定到 ngModel 时遇到问题。当我提交表单时，我从多个选定的标签中只得到一个选定的标签。我需要一种方法来绑定所有选定的值并在提交表单时返回这些值

我尝试了以下场景

1)

<select multiple ([ngModel])="multiSelect1" ngControl="multiSelect1" (change)="multiSelect1=setSelected($event)">
                            <option value="1" id="1">Value1</option>
                            <option value="2" id="2">Value2</option>
                            <option value="3" id="3">Value3</option>
                            <option value="4" id="4">Value4</option>
                        </select>

setSelected($event): String{
    console.log($event.target.selectedOptions);
    let  values = [].slice.call($event.target.selectedOptions).map(a => a.value);

    return values.toString();
}

在上面的代码中，即使更改事件被触发，multiSelect1 也没有得到更新。提交表单时输出为2

2）在这里我没有使用任何更改仍然获得相同的输出。仅显示所选标签的第一个选项

<select multiple ([ngModel])="multiSelect1" ngControl="multiSelect1">
                            <option value="1" id="1">Value1</option>
                            <option value="2" id="2">Value2</option>
                            <option value="3" id="3">Value3</option>
                            <option value="4" id="4">Value4</option>
                        </select>

使用 Angular 版本2.0.0-beta.15

我想知道 setSelected 是否返回任何值，该值是否会绑定到 ngModel 但它没有被绑定。

我正在寻找一种在提交表单时绑定并获取所有选定选项的方法。

4

2 回答 2

0

您可以使用prime ng Multiselect作为替代品，它具有完整的绑定组件，getter setter等在这里您可以看到相同的示例

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities"></p-multiSelect>

http://www.primefaces.org/primeng/#/multiselect

于 2016-12-04T11:26:45.250 回答
0

据我所知，angular 2 中没有多选默认支持，要解决此问题，请参阅此

https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

于 2016-12-04T10:49:22.587 回答