0

我正在尝试使用他们的文档以反应形式使用 PrimeNG Multi-Select ，这与反应形式非常缺乏相关性。

我想要做的是在表单控件下方显示所选项目，如他们的示例中所示，除了他们的示例ngModel不使用反应式表单控件。

我按照他们的示例创建了其余代码，创建了一个变量

  divisionList: SelectItem[];

并将其填充到构造函数中，如他们的示例所示。

然后我创建一个 formBuilder 表单中定义的表单控件：

  fg = this.fb.group({
    ...
    divisions: ['']
  });

和 html 是

<p-multiSelect
          [options]="divisionList"
          formControlName="divisions"
          defaultLabel="Select"
        ></p-multiSelect>

他们简单的基于 ngModel 的方法是<p>Selected Cars: {{selectedCars1}}</p>

但我没有使用 ngModel。那么，如何在模板中显示所选项目？

更新：

我仍然希望有一种更简单的方法，但到目前为止我设法添加了一个更改处理程序：

       <p-multiSelect
          [options]="divisionList"
          formControlName="divisions"
          dropdownIcon="pi pi-caret-down"
          defaultLabel="Select"
          (onChange)="selectDivision($event)"
        ></p-multiSelect>

和功能：

selectDivision(e) {
  this.selectedDivisions = e.value.map((item) => item.name);
  if (this.selectedDivisions.length > 3) {
    this.selectedItemDisplay = `Selected items: ${this.selectedDivisions.join(', ')}`;
  } else {
    this.selectedItemDisplay = '';
  }
}
4

0 回答 0