如何在 PrimeNg 中以反应式形式使用选项列表中的项目计数

Question

我有一个反应，用户需要填写，此外，用户还需要选择我们想要分配的主题。当我创建新用户时一切正常，但是当我使用相同的表单更新用户信息时，但我只想更改主题列表，我的“创建/更新”按钮保持禁用状态。

我不知道如何使用

selectedTopics

来合并到

myForm

并将表格标记为脏。

html代码：

...
<p-pickList class="w-full" [source]="topics" [target]="selectedTopics" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" [sourceStyle]="{ height: '30rem' }" [targetStyle]="{ height: '30rem' }" breakpoint="1400px" filterBy="name" sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" [showSourceControls]="false">
    <ng-template let-topics pTemplate="topic">
        <div class="flex flex-wrap align-items-center gap-3">                            
            <div class="flex-1 flex flex-column gap-2">
                <span class="font-bold">{{ topic.name }}</span>
            </div>
        </div>
    </ng-template>
</p-pickList>
...
<div class="flex justify-content-end gap-2">
    <p-button label="Cancel" severity="secondary" styleClass="p-button-secondary" (onClick)="cancel()" />
    <p-button label="Create/Update" (onClick)="onSubmit()"
        [disabled]="myForm.invalid || !myForm.dirty" />
</div>

我查看了 primeng 文档，但找不到他们建议如何将选项列表与反应式表单一起使用的任何信息。

Answer 1

您尚未共享组件代码来了解您如何组织反应式表单。并且您的项目中没有 Angular 和 primeng 的列表版本。

您可以使用以下选项： 更新您的表单以获取主题数：

*.component.ts

myForm= this.fb.group({
    //...
    // whatever you have from before
    topics: [0]
  });

...

markTopicsAsDirty(): void {
  this.myForm.patchValue({
    topics: this.selectedCategories.length
  });
  this.myForm.get('topics')?.markAsDirty();  
}

在您的 html 代码中，您需要对选项列表组件进行以下更改：

...
<p-pickList class="w-full" [source]="topics" [target]="selectedTopics" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" [sourceStyle]="{ height: '30rem' }" [targetStyle]="{ height: '30rem' }" breakpoint="1400px" filterBy="name" sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" [showSourceControls]="false"
(onTargetReorder)="markTopicsAsDirty()" 
(onMoveToSource)="markTopicsAsDirty()" 
(onMoveAllToSource)="markTopicsAsDirty()" 
(onMoveToTarget)="markTopicsAsDirty()" 
(onMoveAllToTarget)="markTopicsAsDirty()">
    <ng-template let-topics pTemplate="topic">
        <div class="flex flex-wrap align-items-center gap-3">                            
            <div class="flex-1 flex flex-column gap-2">
                <span class="font-bold">{{ topic.name }}</span>
            </div>
        </div>
    </ng-template>
</p-pickList>
...

在这种情况下，您将涵盖与修改

selectedTopics

变量相关的所有事件。

还有一件事，如果您想在移入或移出项目后重新排序源/目标列表，那么您需要向适当的事件添加额外的逻辑。您可以在 picklist API 中阅读更多相关信息 - https://primeng.org/picklist#api.picklist.emitters

如果您不使用 FormBuilder，我建议查看这篇文章：https://medium.com/@krishsurya1249/angular-reactive-forms-c3effd9be1f0