在 Reactive Forms (FormArray) 中检索包含嵌套数组的数据

Question

我在使用嵌套数组检索数据然后将其显示在我的响应式表单中时遇到问题（第二级数组中的数据重复）。问题似乎是我循环数据的方式，但我不确定如何修复它。为了澄清，我在下面举了一个例子（问题出现在 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 的最佳方法，同时还保持它包含在其父 array1 中。

Answer 1

在 for 循环中的 if 语句之前初始化第二个表单数组。通过这样做，您确保不会将 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) 中检索包含嵌套数组的数据

Retrieving data that contains nested arrays in Reactive Forms (FormArray)

javascript

arrays

angular

angular-reactive-forms