Building Angular dynamic form in nested

Question

I am making an angular 6 application using Angular dynamic form, using the link https://angular.io/guide/dynamic-form

Where I am in the need to display the form in nested format...

Scenario 1:

// Filling Project name and description

Initially, there will be two text boxes called project name and description,

let questions: QuestionBase<any>[] = [
  new TextboxQuestion({
    key: 'project_name',
    label: 'Project name',
    required: true,
    type: 'text',
    order: 1
  }),

  new TextboxQuestion({
    key: 'description',
    label: 'Description',
    type: 'text',
    order: 2
  })
];

after filling up two fields user will click on add at the bottom of this form.

Scenario 2:

// Getting another form on click add

After clicking the add, another form with the inputs as,

let questions: QuestionBase<any>[] = [
  new TextboxQuestion({
    key: 'property_one',
    label: 'Property One',
    required: true,
    type: 'text',
    order: 1
  }),

  new TextboxQuestion({
    key: 'property_two',
    label: 'Property Two',
    type: 'text',
    order: 2
  }),

  new DropdownQuestion({
    key: 'level',
    label: 'Priority Level',
    options: [
      { key: 'low', value: 'Low' },
      { key: 'medium', value: 'Medium' },
      { key: 'high', value: 'High' },
    ],
    order: 3
  }),
];

Needs to be displayed.

After filling up both the two forms and click on save the entire data needs to get stored.

My working example, https://stackblitz.com/edit/angular-ysy2xa

Where I am making two forms but it is taking up the last generated form. I know it a wrong approach, as I am very new in angular dynamic form, kindly help me to achieve the result of generating a new form (With properties) on clicking the add after filing up the first two input fields (Project name and description)...