2

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

组件.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);  
}

通过控制台我有这个结果

在此处输入图像描述

在 StackBlitz 中查看

有任何想法吗？

4

2 回答 2

0

表单是一个 UI 元素，它在视图呈现后被实例化。

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

于 2018-09-22T05:15:03.227 回答
0

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

当用户单击编辑按钮时，控制台日志工作指示

找不到带有名称的表单控件：购买

所以我们从这里开始，找出行中的问题

  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 中表示，否则从对象中删除这些属性

下面是一个演示，通过更改setValue为patchValue

于 2021-05-10T19:57:50.137 回答