如何使用 Angular 4 Reactive Form 在 PrimeNg MultiSelect 中设置默认选定值？答案

【问题标题】：How to set by default selected values in PrimeNg MultiSelect with Angular 4 Reactive Form?如何使用 Angular 4 Reactive Form 在 PrimeNg MultiSelect 中设置默认选定值？
【发布时间】：2019-03-01 19:12:35
【问题描述】：

我正在使用来自 PrimeNg (PrimeNg Multiselect) 和 Angular4 的 MultiSelect 控件和一个反应式表单，我想在表单加载期间保持我的一些项目默认选中。

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

【问题讨论】：

您可以将默认值设置为您的 formControlName

标签： angular primeng angular-reactive-forms primeng-dropdowns

【解决方案1】：

HTML

你需要在你的primeng组件中设置一个ngModel

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

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

在这里，我选择了所有这些。

您还必须更新 sensorlist 对象以将所选值更改为 true

【讨论】：

当然你可以将你想要被默认选中的数组传递给数组

【解决方案2】：

您需要在创建formGroup 时为您的selectedSensorsList 提供价值：

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

或稍后设置值：

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

【讨论】：

【解决方案3】：

您必须在 ngOnInit 中设置默认选项

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

【讨论】：