表单控件上的属性被删除（反应形式）

Posted 2023-03-13

【中文标题】表单控件上的属性被删除（反应形式）

【英文标题】：property on form control gets dropped (reactive form)

【发布时间】：2021-11-27 07:31:00

【问题描述】：

我有这个模型：

export class PlantArea 
  constructor(
    public id?: number,
    public code?: string,
    public name?: string,
    public plantId?: number,
    public plant?: Plant,
    public company?: Company
  ) 

我已经设置了这个表格：

form: FormGroup = new FormGroup(
    id: new FormControl(this.formData.id),
    code: new FormControl(this.formData.code, [Validators.required]),
    name: new FormControl(this.formData.name, [Validators.required]),
    company: new FormControl(this.formData.company, [Validators.required]),
    plant: new FormControl(this.formData.plant, [Validators.required]),
  );

我有一个网格，其中有一个编辑按钮。点击它会显示编辑表单，设置一个输入属性，通过this.form.reset(entity)将所选实体绑定到表单：

@Input() set model(entity: T) 
    console.log(entity);
    this.form.reset(entity);
    console.log(this.form.value);
    this.active = entity !== undefined;
    this.editMode = entity?.id ? true : false;
  

问题是，通过重置表单值，plant 属性会被删除并且 appr.控制值未设置。如果我记录实体，plant 属性就在那里，但如果我记录表单值，plant 属性就消失了：

这是为什么？我想不通。表单上有一个plant 控件，所以，它应该将值绑定到这个，对吧？

【问题讨论】：

Plant的结构是什么？这 -> plant: new FormControl(this.formData.plant, [Validators.required]), 应该是 id 和 code 的 FormGroup。如果您将其设置为 FormControl 以设置值，它将期望像 plant:15

我不认为，它应该是 FormGroup，因为 company 也是如此，而这不是 FormGroup。 plant 是一个带有id 和code 的简单对象，正如您在屏幕截图中看到的那样。表单上的控件等待一个对象值，而不是一个普通的 simly 值。

如何编辑表单中的plant 和company 字段？可以分享一下代码吗？如果您在 stackblitz 上提供帮助，将很容易提供帮助

【参考方案1】：

事实证明，这是一场虚惊。我最初禁用了植物控制，这就是为什么 form.value 没有 plant 属性。

另请参阅：disabled control do not ged included in the form value