在 Angular 中使用反应形式在数组内修补数组

Question

我正在尝试在 rows FormArray 中显示 details FormArray。我需要帮助，因为我无法显示 details FormArray 的数据。我只知道如何显示 rows FormArray，但 details FormArray 对我来说很难。这是我在下面尝试过的。请查看我创建的这个 STACKBLITZ 文件。

CLICK THIS LINK

谢谢。

  patchValues() {
        let rows = this.myForm.get('rows') as FormArray;
        this.orders.sales.deliveries.forEach(item => {
            rows.push(this.fb.group({
                delivery_number: item.delivery_number,
                id: item.sales_delivery_id,
                details: this.fb.array([this.patchDetails(item.details, item.details.length-1)])

            }));
        });
  }

  patchDetails(item_details, i) {
        let rows =  (<FormArray>this.myForm.controls['rows']).controls[i]['controls']['details'] as FormArray
        item_details.forEach(item => {
            rows.push(this.fb.group({
                sku: item.ingredient_name
            }));
        });
        console.log(rows)
  }

Answer 1

details: this.fb.array([this.patchDetails(item.details, item.details.length-1)])

您在创建表单数组时调用了 patchDetails，但该方法没有 return 任何内容，您可以将 patchDetails 修改为 return a FormArray，像这样

    patchValues(): void {
        let rows = this.myForm.get('rows') as FormArray;
        this.orders.sales.deliveries.forEach(item => {
            rows.push(this.fb.group({
                delivery_number: [item.delivery_number],
                id: [item.sales_delivery_id],
                details: this.patchDetails(item.details)
            }));
        });
    }


    patchDetails(item_details: any[]): FormArray {
        let detailsFormArray: FormArray = new FormArray([]);
        item_details.forEach(item => detailsFormArray.push(this.fb.group({
          sku: [item.ingredient_SKU],
          name: [item.ingredient_name]
        })));
        return detailsFormArray;
    }

在 Angular 中使用反应形式在数组内修补数组

Patching Array Inside An Array Using Reactive Forms in Angular

angular

angular-forms

angular-reactive-forms

formarray

Stackblitz