Question

我正在以这种方式初始化表单，但是当我需要对其进行编辑时，它不接受值

component.ts

ngOnInit() {
  this.tinvoiceService.initForm();
}

tinvoice.service.ts

form: FormGroup;

constructor(
  private _fb: FormBuilder, 
  private invoiceService: InvoiceService
) {}

initForm(): void {
  this.form = this._fb.group({
    customer: [null, Validators.required],
    totalPrice: 0,
    purchases: this._fb.array([])
  });

  // initialize stream
  const myFormValueChanges$ = this.form.controls['purchases'].valueChanges;
  myFormValueChanges$.subscribe(purchases => this.updatePurchasesAmount(purchases));

}

从HTML中传递值

tinvoice.component.html

<a 
  class="btn btn-outline-info text-info" 
  (click)="tinvoiceService.populateForm(invoice)">
  Edit
</a>

tinvoice-list.component.ts

populateForm(invoice) {
  this.form.setValue(invoice);  
}

通过控制台我得到了这个结果

View in StackBlitz

有什么想法吗？

Answer 1

Form是一个UI元素，在呈现视图后将实例化。

您可以尝试在ngAfterViewInit中调用此函数，该错误应该消失了。如果不只是制造一个小提琴，我会尽力为您修复。

Answer 2

老问题，但会给出我的看法

当用户点击编辑按钮时，控制台日志工作表明

<块引用>

找不到名称为“购买”的表单控件

所以我们从这里开始，找出问题所在

  this.form.setValue(invoice)

如果我们此时记录 invoice 的值，我们会看到

{
    "createdAt": "Mon May 10 2021 15:32:51 GMT+0100 (UTC+01:00)",
    "customer": {
        "address": "s",
        "lastname": "Perez",
        "name": "Carlos ",
        "phone": "7861236589"
    },
    "purchases": [
        {
            "product": {
                "categoryS": "-MZyCBHUjLrfxzoRdZBM",
                "location": "Store",
                "name": "TV Samsung",
                "price": 50
            },
            "quantity": 1
        }
    ],
    "totalPrice": 50,
    "$key": "-M_LgTlysUg07lHdjtuG"
}

如果我们记录 this.form.value 的值，我们 aee

{
    "customer": {
        "name": null,
        "lastname": null,
        "address": null,
        "phone": null
    },
    "createdAt": null
}

所以你试图给表单分配一个不正确的对象结构。

要检查您的代码是否确实有效，您只需将 setValue 更改为 patchValue。以下解决方案有效，因为 patchValue 将只查找与 setValue 不同的表单控件。另一方面，要使用 setValue，您必须确保对象中的所有属性都在 FormGroup 中表示，否则从对象中删除这些属性

下面的 Demo 显示了通过将 setValue 更改为 patchValue

（角度5）错误：无法读取未定义的属性“ setValue”

2 个答案: