将API返回的数据映射到Angular中的嵌套FormArray

Question

我正处于发票工作的最后阶段。我可以成功地添加发票，但我正在努力编写我的Angular代码来编辑发票。从本质上讲，我从我的API返回了以下数据：

{
"dateRaised": "2022-03-08T19:14:37",
"paymentDueDate": "2022-03-08T19:14:37",
"familyGroupId": 1,
"subTotal": 4500,
"discountFactor": 1,
"discountAmount": 10,
"discountDescription": "Early Settlement",
"grandTotal": 4050,
"customerInvoiceLines": [
{
"schoolFeeId": 1,
"quantity": 1,
"amount": 4000
},
{
"schoolFeeId": 1,
"quantity": 1,
"amount": 500
}
]
}

我的Angular代码如下：

ngOnInit(): void {
this.id = this.route.snapshot.params.id;
this.initializeForm();
this.getFamilyGroups();
this.getSchoolFees();
this.getCustomerInvoice(this.id);
this.editCustomerInvoiceChanges$ = this.editCustomerInvoiceForm.controls["customerInvoiceLines"].valueChanges;
this.editCustomerInvoiceChanges$.subscribe(invoiceLineItems =>
this.updateLineItemUnitPrice(invoiceLineItems)
);

const control = <FormArray>this.editCustomerInvoiceForm.controls["customerInvoiceLines"];
}
initializeForm() {
const numberPattern = "^[0-9.,]+R";

this.editCustomerInvoiceForm = this.fb.group ({
dateRaised: ['', Validators.required],
paymentDueDate: ['', Validators.required],
familyGroupId: [0, Validators.required],
subTotal: [],
discountFactor: [],
discountAmount: [],
discountDescription: [],
totalDiscount: [{ value: "", disabled: true }],
grandTotal: [],
customerInvoiceLines: this.fb.array([
this.getNewInvoiceLineItem()
])
});
}

然后我尝试将API返回数据映射到我的表单：

getCustomerInvoice(id){
this.customerInvoiceService.getCustomerInvoice(id).subscribe((invoice : any)=> {
this.editCustomerInvoiceForm.patchValue(invoice);
});
}

patchValue仅修补customerInvoiceLines的第一个数组项。如何映射API中返回的所有发票行？

Answer 1

PathValue不向数组添加元素。您应该向FormArray中添加与现有数据一样多的FormGroup。

因此，一种途径可以是

this.customerInvoiceService.getCustomerInvoice(id).subscribe((invoice : any)=> {
const formArray=this.editCustomerInvoiceForm.get('customerInvoiceLines') as FormArray

formArray.clear();
invoice.customerInvoiceLines.forEach(_=>{
formArray.push(this.getNewInvoiceLineItem())
})
this.editCustomerInvoiceForm.patchValue(invoice);
});

就我个人而言，我更喜欢接收对象或null的函数，并用数据创建formGroup。

想象一下你的函数getNewInvoiceLineItem变成

getNewInvoiceLineItem(data:any=null)
{
data=data || {schoolFeeId: 0,quantity: 0,amount: 0}
return this.fb.group({
schoolFeeId:data.schoolFeeId,
quantity:data.quantity,
amount:data.amount
})
}

所以你可以使用这个功能，并使用一些像

const formArray=this.editCustomerInvoiceForm.get('customerInvoiceLines') as FormArray
formArray=this.fb.formArray(invoice.customerInvoiceLines
.map(x=>this.getNewInvoiceLineItem(x)))

查看如何转换formGroup中数组invoice.customerInvoiceLines的每个值，并且您的formArray是此FormGroups数组的formArray

好吧，真的，我们可以有另一个功能来创建整个表单

getForm(data: any = null) {
data = data || {
dateRaised: null,
paymentDueDate: null,
familyGroupId: 0,
subTotal: 0,
discountFactor: 0,
discountAmount: 0,
discountDescription: null,
totalDiscount: 0,
grandTotal: 0,
customerInvoiceLines: null,
};
return this.fb.group({
dateRaised: [data.dateRaised, Validators.required],
paymentDueDate: [data.paymentDueDate, Validators.required],
familyGroupId: [data.familyGroupId, Validators.required],
subTotal: data.subTotal,
discountFactor: data.discountFactor,
discountAmount: data.discountAmount,
discountDescription: data.discountDescription,
totalDiscount: [{ value: data.totalDiscount, disabled: true }],
grandTotal: data.grandTotal,
customerInvoiceLines: data.customerInvoiceLines
? this.fb.array(
data.customerInvoiceLines.map((x) => this.getNewInvoiceLineItem(x))
)
: this.getNewInvoiceLineItem(),
});
}

然后看看你可以使用

this.customerInvoiceService.getCustomerInvoice(id).subscribe((invoice : any)=> {
this.editCustomerInvoiceForm=this.getForm(invoice);
});