web-dev-qa-db-ja.com

angular 6のリアクティブフォームを含むng-select複数選択チェックボックス

リンク（ https://ng-select.github.io/ng-select#/multiselect-checkbox ）にアクセスして、ng-select複数選択チェックボックスを確認してください。

私はng-select "Group Select children"をmy angular 6アプリケーションで使用しようとしています。

Ng-select "Group Select children"をテンプレートドリブンフォームではなくリアクティブフォームで使用すると問題が発生します。

疲れた

<ng-select
          [items]="userGroupsList"
          [multiple]="true"
          bindLabel="name"
          groupBy="gender"
          [selectableGroup]="true"
          [selectableGroupAsModel]="false"
          [closeOnSelect]="false"
          bindValue="id"
          formControlName="userGroups" placeholder="Select a user group">
            <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
                <input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupParent"/> {{item.gender | uppercase}}
            </ng-template>
            <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
                <input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupChild"/> {{item.name}}
            </ng-template>
        </ng-select>

Multiselect-checkbox-- [items] = "userGroupsList"の同じデータを使用しました

https://github.com/ng-select/ng-select/blob/master/demo/app/shared/data.service.ts -getMockPeople（）にはデータがあります

したがって、ここでは、入力で[（ngModel）]およびformControlNameを使用できます。例のように親が選択されたときに子要素を選択する方法

助けてください....！

angular6angular-reactive-formsangular-ngselect
5
Tanjore Raj

これをformGroupで機能させるには、formGroupにバインドするng-selectのformControlNameを保持します。

問題は、テンプレートへの入力です。私にとって最良の解決策は、例のようにngModelを使い続けることです。しかし、angularを理解する必要があります。これはfromGroupとは無関係であるため、オプションをスタンドアロンに追加できます。

<input id="item-{{index}}" type="checkbox" [(ngModel)]="item$.selected" [ngModelOptions]="{ standalone : true }" />
3
xrobert35

NgModelなしでそれを行う別の方法があります：

<input id="item-{{index}}" type="checkbox" [checked]="item$.selected" />
1
Sa Hagin