从返回的后端数据中为表单控件分配默认值

Question

我无法将表单控件的默认值分配给从后端获取的数字。

我已将该号码保存到它自己的对象中，并试图在表单控件中调用它。

totalInvoice: number;

finalizeInvoiceCost = this.fb.group({
   totalInvoiceCost: [this.totalInvoice]
});

我希望表单控件默认为存储在 totalInvoice 中的数字，但是当我将其记录到控制台时，它显示的值为 'null'

Answer 1

您可以使用 formBuilder 为您的控件设置默认值，如下所示：

finalizeInvoiceCost = this.fb.group({
    totalInvoiceCost:  this.fb.control(this.totalInvoice, [])
});

如果您已经 totalInvoice 初始化了。如果你不这样做，那么你可以稍后通过调用：

this.finalizeInvoiceCost.get('totalInvoiceCost').patchValue(this.someNewValue);

Answer 2

好的，初始化后 totalInvoice 您可以将其值设置为以下形式：

this.finalizeInvoiceCost.patchValue({totalInvoiceCost: this.totalInvoice});

您也可以使用 setValue，但为此您必须为表单中的每个字段赋值，否则它会崩溃。

Answer 3

可能 formControl 正在使用默认值 'null' 获取 'totalInvoice'，因为您的 'totalInvoice' 尚未从后端收到数据。

首先你必须确保 'totalInvoice' 有数据。

或者你可以用这个，在'totalInvoicesCost'有数据后

this.finalizeInvoiceCost.get('totalInvoiceCost').setValue(totalInvoice);

Assigning form-control a default from returned backend data