Блог

Пример кода — Stackblitz

Мне нужно заполнить значения на основе приведенного ниже формата 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",
          },      
        ]
      }
    ]
  

Форма также имеет отдельные кнопки, такие как «Добавить элемент» и «Добавить действие» в форме.

Я не мог управлять узлами для обоих типов отдельно, поэтому я решил скрыть класс div атрибута leg при добавлении activity и скрыть activity при добавлении leg и, наконец, удалить нулевые значения перед отправкой на сервер, чтобы я получил его в уважаемом формате JSON.

Однако я не могу добиться отображения и скрытия поведения для итеративных форм. При нажатии кнопки activity форма activity заполняется для 1-й итерации, и когда я хочу добавить значения ветвей после нажатия кнопки, также заполняются значения ветвей, которые были скрыты на предыдущей итерации.

Есть ли какой-либо способ скрыть и отобразить значения на основе итерации?

Пример файла .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:'',
          })
    )
  }
  

Подробный код можно найти здесь

Ожидание: если я добавляю активность для первых двух итераций, а затем нажимаю кнопку «Элемент», я хочу, чтобы элемент отображался только на 3-й итерации и не отображался также на первых двух итерациях. И, перейдя к этому, если я нажимаю кнопку activity, это должна быть 4-я итерация после этапа. В основном пытаюсь добиться отдельных элементов управления в одном и том же FormArray.

Пожалуйста, предложите, если вы найдете какую-либо другую альтернативу этому.

Кроме того, вы можете разделить свою форму на 2 части. Оберните части формы с помощью divs, которые отображаются условно. Используйте type в качестве поставщика условий, как показано ниже :

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

И не инициализируйте форму пустыми значениями.

Stackblitz