javascript - 表单数组填充到另一个组件
问题描述
我正在使用reactive forms
并且里面有表单数组。一个组件将值存储到数据库中,我现在有另一个组件用于编辑这些值并更新它们。但我无法弄清楚表单数组,因为我无法将它们提取到表单数组字段。它说 {} 上不存在 ForEach。有什么问题?这是我的代码。
编辑.component.ts
ngOnInit() {
this.requestID = this.route.snapshot.params.requestID;
this.formService.getFormDetails(this.formID).subscribe((data: any) => {
data.forEach(customer => {
if (customer) {
this.customerFormEdit.patchValue({
requestID: customer.requestID,
requestType: customer.requestInformation.requestType,
specialRequest: customer.specialRequest,
sendTo_email: customer.requestInformation.sendTo.email
// I know patch values is used to patch normal fields
});
this.getEquip()
}
getEquip() {
const control = <FormArray>this.customerFormEdit.controls['equipment'];
this.customers.equipment.forEach(x => {
control.push(this.fb.group({ SerialNo: x.serialNo }))
})
}
这就是我的客户模型的样子
export class CustomerForm {
company: string;
attention: string;
email: string;
requestType: string;
specialRequest:string
equipment: {
serialNo: string;
customerID: string;
};
}
这就是表单数组存储在 JSON 中的方式
"installations" : [
{
"_id" : ObjectId("5cb54f48c39990305c8e026e"),
"customerSerialNo" : "273823",
"customerID" : "32324",
}]
// fb 数组
equipment:this.fb.array([this.fb.group({
serialNo:"",
customerID:""
})])
解决方案
您已将设备声明为模型内的对象,而它应该是一个数组。
您的模型应分开为,
export class CustomerForm {
company: string;
attention: string;
email: string;
requestType: string;
specialRequest:string
equipment[];
}
export class equipment{
serialNo: string;
customerID: string;
}
推荐阅读
- php - php mailer SMTP 错误:无法连接到 SMTP 主机
- c++ - 在命名管道中使用 windows 完成端口
- css - 更改整个 div 的背景颜色
- angular - Angular 7 FormArray 渲染性能
- google-apps-script - Google Speech Recognition API 结果仅返回元数据
- ios - 如何仅在详细视图中隐藏导航栏阴影?
- aws-lambda - 如何使用无服务器框架中的多个路径参数
- azure - 与用户共享 blob 存储的任何其他替代方法都存在安全访问签名问题
- javascript - 如何将动态值传递给 div 元素然后访问它 - React?
- ios - Swift NSAttributedString 显示带有缩进的块引用