P-MultiSelect onChange防止添加具有相同索引的元素

2022-04-13 00:00:00 javascript angular typescript primeng rxjs

我有来自数组的多选选项和6个选项。其中一个选项与其他选项略有不同(它允许添加备注,而在其他选项中不允许)。当我选择这个选项和其中一个字段x(备注)时,在我删除它并再次选择后,该字段将为空(假设在第一种情况下我正在添加reark,在第二次我不是),所以多重选择将添加它两次!但我希望每个索引都有1个VELUE(不考虑其他字段)。我应该怎么做?另一个地方不同之处在于从服务器获取选定值,而在用户选择它后应该选择它,看起来就像他没有选择。

  <p-multiSelect *ngIf="_decision.decisionStatusId == eDecisionType.Reject || _decision.decisionStatusId == eDecisionType.ReturnedToUser" [required]="formGroup.hasError('remark-reasons-required')"
                   [options]="reasons" defaultLabel="" formControlName="remarks" [(ngModel)]="selectedReasons" optionLabel="hebName"
                   [ngClass]="_decision.decisionStatusId == eDecisionType.ReturnedToUser || _decision.decisionStatusId == eDecisionType.Reject ? '' : 'display-none'"
                   selectedItemsLabel="{0} "
                   (onChange)="onChangeReasonsValue($event)"></p-multiSelect>

.ts

onChangeReasonsValue(event: { value: ReviewDecisionReasonModel[] }): void {
    this.selectedReasons = event.value;
    this._decision.reasons = event.value;
    this.formGroup.markAsDirty();
    this.formGroup.markAsTouched();
    this.formGroup.updateValueAndValidity();
  }

same index values


解决方案

关于您的代码

您有*ngIf =condition[ngClass]=相同的情况?‘’:‘Display-None’‘。因此,您可以删除[ngClass]-Always is Full

您正在使用事件(onChange)为变量selectedReasons_decision.reasons赋值。确保Event.Value是一个在多选中选择了所有对象的数组。

您已经拥有[(ngModel)]="selectedReasons",所以不需要使用事件onChange

您有一个Form ControlName=";备注";。我看不到您的表单组。此外,您可以Not在同一标记FormControlName和ngModel中使用。也许您想使用事件onChange来创建一些类似的内容:

onChangeReasonsValue(event: { value: ReviewDecisionReasonModel[] }): void {
    this.formGroup.get('mark'.setValue(event.value)
}

? (但请记住删除代码中的formControlName)

对不起,我听不懂[required]="formGroup.hasError('remark-reasons-required')"

相关文章