Question

我有问题将多选择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 Version 2.0.0-beta.15

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

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

Answer 1

在角度2中没有多选默认支持，正如我所听到的，为了解决这个问题，请参考

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

Answer 2

你可以使用prime ng multiselect作为替代，它具有完整的绑定，getter setter等组件在这里你可以看到同样的例子

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

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

用于动态创建的mutl select html元素的Angular2数据绑定

2 个答案: