提问人:fearless924 提问时间:11/17/2023 更新时间:11/17/2023 访问量:30
如何使用 PatchValue 编辑嵌套表单数组?
How Do I Edit a Nested Form Array using PatchValue?
问:
我有一个服务,它调用一个 API 来填充一个选择下拉列表。当我选择一个选项时,我的 OnChange 方法会从正在调用的另一个服务中检索数据。然后,该数据将显示在 UI 上。数据显示良好,如果我想更改某些内容,则字段不会更新。现在,我正在使用 forEach 内部的推送控件来获取数据。
const infoTemp = this.tempInfo?.customFields?.textCustomFields;
infoTemp.forEach((res) => {
this.customNameFormArr.push(
this.fb.group({
name: [res.name],
value: [res.value],
})
);
});
我很确定我必须使用 patchValue 才能编辑字段。我已经尝试了这段代码,但它似乎不起作用。有什么想法吗?
this.envelopeRequest.controls.newRequest.patchValue({
customFields: {
textFields: [
{
name: res.name,
value: res.value
}
]
}
})
这是我的 StackBlitz 演示的链接。谢谢。演示
答:
0赞
Yong Shun
11/17/2023
#1
在 HTML 中,您将值与属性绑定。value
<input type="text" value="{{ t.value }}" />
相反,您需要应用该属性来利用 Reactive Form (way),以便它反映值。formControlName
<input type="text" formControlName="value" />
对于第二个问题,我注意到在更改选项时,(s) 将保留上一个(选定)选项中的值。在与新选定选项的值绑定之前,重置/清除 (s) 中的项目是不正确的。FormArray
FormArray
this.customNameFormArr.clear();
this.customTextFormArr.clear();
评论