1

複数選択の html 要素を ngModel にバインドする際に問題が発生しています。フォームを送信すると、選択した複数のラベルから選択したラベルが 1 つだけ取得されます。選択したすべての値をバインドし、フォームが送信されたときにそれらの値を返す方法が必要です

以下のシナリオを試しました

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

私が聞いたように、角度2にはまだ複数選択のデフォルトサポートはありません。これを回避するには、これを参照してください

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

于 2016-12-04T10:49:22.587 に答える
0

バインディング、ゲッターセッターなどを備えた完全なコンポーネントを持つ代替として、プライミングマルチセレクトを使用できます。ここで同じ例を見ることができます

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

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

于 2016-12-04T11:26:45.250 に答える