PrimeNG 下拉框在使用 patchValue() 时未更新 UI。

huangapple go评论101阅读模式
英文:

PrimeNG dropdown isn't updating UI when using patchValue()

问题

我正在使用带有几个字段的响应式表单。三个下拉框和一个日历,它们都是PrimeNG组件。除了 项目(project) 字段之外,所有字段在调用 patchValue() 后更新其UI中的值。

我已记录了传递给 patchValue() 的值,并且还记录了表单。表单显示了正确的值,但UI没有更新,只选择了第一个值。项目数组在调用 patchValue() 之前就已经填充了。

我有一种感觉,这可能与项目的ID是GUID有关。其他下拉框绑定到枚举值。

我尝试了一些方法:

  • 在下拉框中添加占位符(一篇帖子建议这样做)
  • 将项目对象用作值,而不仅仅是id字段
  • 格式化GUID,去掉破折号并将其用作值
  • patchValue() 周围设置一个超时
  • patchValue() 移动到 ngAfterViewInit()

所有这些方法都没有解决问题。我似乎找不到其他人遇到过这个问题,是因为我在值中使用了奇怪的数据类型吗?我以前从未遇到过使用字符串作为值时出现问题。无论如何,这里是代码。

构造函数

this.calculationForm = new UntypedFormGroup({
  'project': new UntypedFormControl(null),
  'status': new UntypedFormControl(0),
  'type': new UntypedFormControl(0),
  'deadline': new UntypedFormControl(new Date(), [Validators.required])
}); 

ngOnInit

this.calculationForm.patchValue({
  'project': this.calculation.project.id,
  'status': this.calculation.status,
  'type': this.calculation.type,
  'deadline': new Date(this.calculation.deadline)
});

项目接口

export interface Project {
  id: string;
  code: string;
  description: string;
}

HTML

<div class="field">
  <label for="project">{{ 'calculations.edit.project.label' | translate }}</label>
  <p-dropdown
    id="project"
    inputId="project"
    [options]="projects"
    formControlName="project"
    optionValue="id"
    optionLabel="code"
    appendTo="body"
  ></p-dropdown>
</div>
  • Angular ^14.1.0
  • PrimeNG ^14.0.0

提前感谢您的帮助。

英文:

I am using a reactive form with a couple of fields. Three dropdowns and one calendar, all of them are PrimeNG components. All fields, except the project field, update their values in the UI after calling patchValue().

I have logged the value going into the form in patchValue() and also logged the form afterwards. The form shows the correct value, but the UI isn't updated and just selects the first value. The project array is filled long before patchValue() is called.

I have the feeling that it has something to with the project's ID being a GUID. The other dropdowns bind to an enum value.

I have tried a couple of things:

  • Add placeholder to dropdown (a post suggested this)
  • Using the project object as value instead of only the id field
  • Formatting the GUID without dashes and use that as value
  • Set a timeout around patchValue()
  • Move patchValue() to ngAfterViewInit()

All these things did not solve the issue. I can't seem to find anyone else with this issue, is it because I am using a weird datatype for the value? I never faced any issues with strings being used as values before. Anyways, here is the code.

Constructor

this.calculationForm = new UntypedFormGroup({
  &#39;project&#39;: new UntypedFormControl(null),
  &#39;status&#39;: new UntypedFormControl(0),
  &#39;type&#39;: new UntypedFormControl(0),
  &#39;deadline&#39;: new UntypedFormControl(new Date(), [Validators.required])
}); 

ngOnInit

this.calculationForm.patchValue({
  &#39;project&#39;: this.calculation.project.id,
  &#39;status&#39;: this.calculation.status,
  &#39;type&#39;: this.calculation.type,
  &#39;deadline&#39;: new Date(this.calculation.deadline)
});

Project interface

export interface Project {
  id: string;
  code: string;
  description: string;
}

HTML

&lt;div class=&quot;field&quot;&gt;
  &lt;label for=&quot;project&quot;&gt;{{ &#39;calculations.edit.project.label&#39; | translate }}&lt;/label&gt;
  &lt;p-dropdown
    id=&quot;project&quot;
    inputId=&quot;project&quot;
    [options]=&quot;projects&quot;
    formControlName=&quot;project&quot;
    optionValue=&quot;id&quot;
    optionLabel=&quot;code&quot;
    appendTo=&quot;body&quot;
  &gt;&lt;/p-dropdown&gt;
&lt;/div&gt;
  • Angular ^14.1.0
  • PrimeNG ^14.0.0

Thank you in advance.

答案1

得分: 0

问题最终与下拉菜单的关键字段区分大小写有关。项目 GUID 从后端返回为小写,而项目数组中的 GUID 为大写。

英文:

In the end, the issue was related to the dropdown's key field being case sensitive. The project GUID was being returned lowercase from the backend while the projects array had uppercase GUIDs.

huangapple
  • 本文由 发表于 2023年5月24日 17:21:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/76321962.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定