Как установить по умолчанию выбранные значения в PrimeNg MultiSelect с Angular 4 Reactive Form?

Question

Я использую управление MultiSelect от PrimeNg ( PrimeNg Multiselect) и Angular4 с реактивной формой, и я хочу оставить некоторые свои элементы по умолчанию выбранными во время загрузки формы.

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>

Вот мой код TypeScript

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: []
 });

Answer 1

HTML

Вам нужно установить ngModel в вашем компоненте primeng

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

Прямо здесь я выбираю их всех.

Вам также придется обновить объект списка датчиков, чтобы изменить выбранное значение на true

Answer 2

You need to provide value for your selectedSensorsList когда вы создаете formGroup:

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

or set the value later:

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

Answer 3

Вы должны установить опцию по умолчанию в ngOnInit

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