p-multiSelect 如何防止添加具有相同索引的元素

Question

我有一个 multi-select 的选项列表。在其中一个选项中，我应该添加另一个字段备注字段。所以 selecting 在第一时间添加这个字段。但是当删除 selection 时，它不会从数组中删除此 selection，因为我没有删除备注字段。因此，当 select 此选项再次添加两次相同的索引（一个带有备注字段，一个在备注中带有 null ）时，只有当数组中没有此索引时，我才需要设置值

<p-multiSelect [required]="formGroup.hasError('remark-reasons-required')"
                   [options]="reasons" defaultLabel="" formControlName="remarks"  optionLabel="hebName"         
                   selectedItemsLabel="{0} "
                   (onChange)="onChangeReasonsValue($event)"></p-multiSelect>

 onChangeReasonsValue(event: { value: ReviewDecisionReasonModel[] }): void {
    //
    var selectedArray = event.value.filter(function (item, pos) {
      return event.value.indexOf(item) == pos;
    })
    this.formGroup.get('remarks').setValue(selectedArray);
    this.selectedReasons = selectedArray;
    this._decision.reasons = selectedArray;
}

Answer 1

multi-select 组件似乎有一个错误，该组件的 disabled/removed 选项仍然添加到相关的 formControl 中。

我建议您在您的选项中添加一个“禁用”属性，并将此选项设置为 select 离子变化而不是 adding/removing 它们。之后，您可以仅使用启用的选项来调整 formValues。

此外，您不能使用 (OnChange) 来支持从组件订阅表单更改。

类似

otherReasonWhen2 = { id: 3, hebName: 'heb3', freeTextAllow: false, disabled: true };
  reasons = [
    { id: 1, hebName: 'heb1', freeTextAllow: false, disabled: false },
    { id: 2, hebName: 'heb2', freeTextAllow: false, disabled: false },
    this.otherReasonWhen2,
  ];

ngOnInit() {
    this.formGroup.get('remarks').valueChanges.subscribe((newValues) => {
      console.log(newValues) // This is here for you to see the values as they change
      this.otherReasonWhen2.disabled = newValues.every(reason => reason.id !== 2)

      if (newValues.some(reason => reason.disabled)){
        // work-around for the observed bug: when there are disabled options selected, remove them from the form.
        this.formGroup.get('remarks').setValue(newValues.filter(reason => !reason.disabled));
      }
    });
  }

并且不要忘记添加指令以禁用该选项：

<p-multiSelect
    [options]="reasons"
    optionDisabled="disabled" <-- Here
    defaultLabel=""
    formControlName="remarks"
    optionLabel="hebName"
    selectedItemsLabel="{0} "
  ></p-multiSelect>

p-multiSelect 如何防止添加具有相同索引的元素

p-multiSelect how prevent adding elements with the same index

javascript

rxjs

typescript

primeng

angular