How to set by default selected values in PrimeNg MultiSelect with Angular 4 Reactive Form?

Question

I am using MultiSelect control from PrimeNg (PrimeNg Multiselect) & Angular4 with a Reactive Form, and I want to keep some my items default selected during form loading.

HTML

<div class="col-md-4">
      <span translate>settings.account.webhook.label.additional.variables</span>
      <p-multiSelect [options]="sensorsList" (onChange)="changeSensorsList($event)"
            formControlName="selectedSensorsList" name="selectedSensorsList" [panelStyle]="{minWidth:'20em'}"></p-multiSelect>
</div>

Here is my TypeScript code

sensorsList = [
    { label: 'lat', value: {'id': 0, 'itemName': 'lat', 'selected': false }},
    { label: 'lng', value: {'id': 1, 'itemName': 'lng' , 'selected': false}},
    { label: 'address', value: {'id': 2, 'itemName': 'address' , 'selected': false}},
    { label: 'origin', value: {'id': 3, 'itemName': 'origin' , 'selected': false}}
  ];

 this.addEditWebhookForm = this._formBuilder.group({
      name: [(_webhookToEdit) ? _webhookToEdit['name'] : '', [Validators.required]],
      selectedSensorsList: []
 });

You can set the default value to your formControlName – Aniket Avhad Sep 26 '18 at 05:30 — Aniket Avhad, Sep 26 '18 at 05:30

score -1 · Answer 1 · answered Sep 26 '18 at 05:34

HTML

You need to set a ngModel in your primeng component

<div class="col-md-4">
          <span translate>settings.account.webhook.label.additional.variables</span>
          <p-multiSelect [options]="sensorsList" (onChange)="changeSensorsList($event)"
                formControlName="selectedSensorsList" name="selectedSensorsList" [panelStyle]="{minWidth:'20em'}"  [(ngModel)]="selectedDefault"></p-multiSelect>
    </div>

TS

selectedDefault= [];
sensorsList.map((item) => selectedDefault.push(item.value));

Right here I'm selecting all of them.

You will also have to udpate the sensorlist object to changed the value selected to true

Of course you can pass to the array the ones you want to be selected by default — Patricio Vargas, Sep 26 '18 at 05:37
We are not supposed to use formControlName and ngModel on a same component — Deepak paramesh, Mar 29 '22 at 12:47

score -1 · Answer 2 · answered Sep 26 '18 at 05:53

-1

You have to set default option with in ngOnInit

selectedSensorsList: [{'id': 0, 'itemName': 'lat'}]

answered Sep 26 '18 at 05:53

Chintan Kukadiya

784
5
16

score -1 · Answer 3 · answered Sep 26 '18 at 05:56

You need to provide value for your selectedSensorsList when you create the formGroup:

 this.addEditWebhookForm = this._formBuilder.group({
     ...,
     selectedSensorsList: [
         defaulSensorsList
     ]
 });

or set the value later:

this._formBuilder.get('selectedSensorsList').setValue(defaultSenorsList);

How to set by default selected values in PrimeNg MultiSelect with Angular 4 Reactive Form?

3 Answers3