Question

我无法使用嵌套数组检索数据，然后将其显示在我的Reactive Form中（第二级数组中的数据会重复）。问题似乎是我循环数据的方式，但我不知道如何解决它。为了澄清我在下面有一个例子（问题出现在array2属性中）。

原始数据对象

nestedData = {
nestOne: "Level One",
array1: [
  {
    nestTwo: "A",
    array2: ["Tag A"]
  },
  {
    nestTwo: "B",
    array2: ["Tag B"]
  }
]};

以下是“无效代码”

 nestedForm: FormGroup;
 let array_one = new FormArray([]);
 let array_two = new FormArray([]);
 // If an If block to check if 'array1' property is present;
 if (this.nestedData['array1']) {
    for (let ar1 of this.nestedData.array1) {
    // IF BLOCK FOR array2
        if (ar1['array2']) {
        // For loop to get array2 data
            for (let ar2 of ar1.array2) {

                array_two.push(
                    new FormControl(ar2, Validators.required),
                )

            }
        } //IF Block Ends

        array_one.push(
            new FormGroup({
                'nestTwo': new FormControl(ar1.nestTwo),
                'array2': array_two
            })
        );
    }
}

this.nestedForm = this.fb.group({
    'nestedOne': [this.nestedData.nestOne],
    'array1': array_one
});

现在看来这是结果：

{{nestedForm.value | json}}

    {
    "nestedOne": "Level One",
    "array1": [
        {
            "nestTwo": "A",
            "array2": [
                "Tag A",
                "Tag B"
            ]
        },
        {
            "nestTwo": "B",
            "array2": [
                "Tag A",
                "Tag B"
            ]
        }

}

如你所见。标签A和标签B出现在两个array2属性中，但不应该出现。我不知道检索array2数据的最佳方法，然后将其推入Reactive FormArray，同时保持其包含在其父数组1中。

Answer 1

在 if 语句之前，在 for 循环内初始化第二个表单数组。通过这样做，您确保不会将 array2 值推送到相同的表单中。

nestedForm: FormGroup;
let array_one = new FormArray([]);
// If an If block to check if 'array1' property is present;
if (this.nestedData['array1']) {
    for (let ar1 of this.nestedData.array1) {
     let array_two = new FormArray([]); // initialize here
     // IF BLOCK FOR array2
        if (ar1['array2']) {
        // For loop to get array2 data
         for (let ar2 of ar1.array2) {
             array_two.push(new FormControl(ar2, Validators.required));
         }
    } //IF Block Ends

    array_one.push(
        new FormGroup({
            'nestTwo': new FormControl(ar1.nestTwo),
            'array2': array_two // but if the data is not available, you will be pushing empty form array here
        })
    );
  }
}

this.nestedForm = this.fb.group({
    'nestedOne': [this.nestedData.nestOne],
    'array1': array_one
});

在Reactive Forms（FormArray）中检索包含嵌套数组的数据

1 个答案: