web-dev-qa-db-fra.com

ng-select multi-select case à cocher avec les formes réactives dans angular 6

Veuillez suivre le lien ( https://ng-select.github.io/ng-select#/multiselect-checkbox ) pour connaître la case à cocher ng-select multi-select.

J'essaie d'utiliser ng-select "Le groupe sélectionne les enfants" dans mon application angular 6.

J'ai des problèmes pour utiliser ng-select "Le groupe sélectionne les enfants" avec des formulaires réactifs au lieu de formulaires basés sur des modèles.

Je l'ai fatigué comme

<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>

J'ai utilisé les mêmes données de la multiselect-checkbox-- [items] = "userGroupsList"

https://github.com/ng-select/ng-select/blob/master/demo/app/shared/data.service.ts - getMockPeople () contient les données

Je peux donc utiliser le [(ngModel)] ainsi que formControlName sur l'entrée, comment puis-je sélectionner les éléments enfants lorsque le parent est sélectionné comme dans l'exemple

S'il vous plaît aider ....!

angular6angular-reactive-formsangular-ngselect
4
Tanjore Raj

Pour que cela fonctionne avec formGroup: gardez le formControlName sur le ng-select qui sera lié à votre formGroup. 

Le problème vient de ceux entrés dans le modèle. Pour moi, la meilleure solution est de continuer à utiliser ngModel comme dans l'exemple. Mais vous devez faire comprendre à Angular qu’il n’ya rien à voir avec le groupe fromGroup, vous pouvez donc y ajouter l’option autonome.

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

Il existe un autre moyen de faire cela sans ngModel: 

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