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

问题描述

Sample code - Stackblitz

我需要根据以下Format 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","cost": 2000,"location": "soup curry restaurant",},]
      }
    ]

该表单还具有单独的按钮，例如表单中的“添加腿”和“添加活动”。

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

但是，我无法实现迭代形式的显示和隐藏行为。 单击活动按钮时，将为第一次迭代填充活动表单，并且当我想在单击按钮后添加支腿值时，还将填充在先前迭代中隐藏的支腿值。

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

.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

期望： 如果我要为前两个迭代添加活动，然后单击“腿”按钮，则希望只在第3个迭代中显示该腿，而在前两个迭代中也不显示。继续进行下去，如果我单击活动按钮，则应该是第四步。基本上是尝试在同一formArray上实现单独的控件。

请建议您是否找到其他替代方法。

解决方法

或者，您可以将表格分为两部分。用有条件渲染的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