Angular 反应形式 - 数组值的动态构建（根据迭代隐藏和显示值）

Question

我需要根据以下格式填充值 JSON,

    "days": [
      {
        "date": "2020-09-21T09:00:04.206+00:00",
        "nodes": [
          {
            "type": "leg",
            "from": "airport",
            "to": "oshiage station",
            "cost": 1170
          },
         {
            "type": "activity",
            "category": "food",
            "cost": 200,
            "location": "ramen place"
          }
          {
            "type": "activity",
            "category": "food",
            "cost": 2000,
            "location": "soup curry restaurant",
          },      
        ]
      }
    ]

表单中还有单独的按钮，例如'Add Leg'和'Add activity'。

我无法分别控制两种类型的节点，所以我决定在添加 activity 时隐藏腿属性的 div class 并隐藏 activity 当添加腿并最终在发送到服务器之前删除空值，所以我会以受人尊敬的 JSON 格式获取它。

但是，我无法实现迭代表单的显示和隐藏行为。单击 activity 按钮时，第一次迭代会填充 activity 表单，当我想在单击按钮后添加边值时，上一次迭代中隐藏的边值也会被填充.

有什么方法可以根据迭代隐藏和显示值吗？

示例 .ts 文件：

  form: FormGroup;
  bubbleActivity:any;
  bubbleTravel:any;
 addTravel(ix){
    this.bubbleTravel = true;
    const control = (<FormArray>this.form.controls['days']).at(ix).get('nodes') as FormArray;
    control.push(
        this.fb.group({
            type: 'leg',
            from: '',
            to: '',
            cost:'',
            category: null,
            costActivity: null,
            location:null,
          })
    )
  }
addActivity(ix) {
    this.bubbleActivity = true;
    const control = (<FormArray>this.form.controls['days']).at(ix).get('nodes') as FormArray;
    control.push
    (
        this.fb.group({
            type: 'activity',
            from: null,
            to: null,
            cost:null,
            category: '',
            costActivity: '',
            location:'',
          })
    )
  }

Can find elaborate code here

期望：如果我在前两次迭代中添加 activity，然后单击腿部按钮，我希望腿部仅在第三次迭代中显示，而不在前两次迭代中显示。然后继续，如果我单击 activity 按钮，它应该是第 4 次迭代。基本上试图在同一个 formArray 上实现单独的控件。

如果您找到其他替代方案，请提出建议。

Answer 1

或者，您可以将表格分成两部分。使用有条件呈现的 div 包裹您的表单。使用 type 作为条件提供者，如下所示：

<div *ngIf="Y.value.type === 'leg'">
 <!-- leg  form controls here -->
</div>
<div *ngIf="Y.value.type === 'activity'">
 <!-- activity form controls here -->
</div>

并且不要用空值初始化表单。

Stackblitz

Angular 反应形式 - 数组值的动态构建（根据迭代隐藏和显示值）

Angular Reactive Form - Dynamic building of array values (hide and show values based on the iteration)

html

angular

angular-reactive-forms

angular-forms

angular-formbuilder