Создавайте динамические формы с динамическими полями формы с одной кнопкой отправки в angular 7

Я создал динамические формы с полями динамической формы в Angular 7, но я не могу поддерживать одну кнопку отправки, которая будет возвращаться со значением всей динамической формы.

динамическая форма-multiple.html

<form novalidate (ngSubmit) = "onSubmit(form.value)" [formGroup] = "form">
  <div class = "form-group">
  <h4>Details for {{group.groupName}}</h4>
  <div class='row flex-row'>
     <div class='col-md-6' *ngFor = "let prop of objectProps">
        <div [ngSwitch] = "prop.itemType">
           <div *ngSwitchCase = "'Item'">
              <label [attr.for] = "prop">{{prop.egineAttribue}}</label>
              <div [ngSwitch] = "prop.componentType">
                 <div class='form-group__text'>
                    <input *ngSwitchCase = "'Free Text'" 
                    [formControlName] = "prop.key"
                    [id] = "prop.key" [type] = "prop.type" class = "form-control">
                 </div>
                 <div *ngSwitchCase = "'Radio Button'">
                    <label *ngFor = "let option of prop.values">
                    <input
                    type = "radio"
                    (change)='ind=i'
                    class = "form-control"
                    [name] = "prop.key"
                    [formControlName] = "prop.key"
                    [value] = "option">{{option}}
                    </label>
                 </div>
                 <div class='form-group__text select' *ngSwitchCase = "'Drop-down'">
                    <select class = "form-control" [formControlName] = "prop.key">
                    <option *ngFor = "let option of prop.values" [value] = "option">
                    {{ option }}
                    </option>
                    </select>
                 </div>
              </div>
              <div class = "error" *ngIf = "form.get(prop.key).invalid && (form.get(prop.key).dirty || form.get(prop.key).touched)">
                 <div *ngIf = "form.get(prop.key).errors.required">
                    {{ prop.label }} is required.
                 </div>
              </div>
           </div>
        </div>
     </div>
  </div>
  </div>
  </form>

динамическая форма-multiple.ts

@Input() dataObject;
    @Input() group;
    form: FormGroup;    
ngOnInit() {
        this.offerconstructService.formReset.subscribe((val) => {
            if (val==='reset'){
            }
        })
        this.tempObj = this.dataObject;
        // remap the API to be suitable for iterating over it
        this.objectProps =
            Object.keys(this.dataObject)
                .map(prop => {
                    return Object.assign({}, { key: prop },
                        this.dataObject[prop]);
                });
        // setup the form
        const formGroup = {};
        for (let prop of Object.keys(this.dataObject)) {
            formGroup[prop] = new FormControl(this.dataObject[prop].value || '', this.mapValidators(this.dataObject[prop].validation));
        }
        this.form = new FormGroup(formGroup);
    }

холст.component.ts

<p-dialog header = "Add All Offer Details" closable = "true" modal = "true" showHeader = "false" (onHide) = "onHide()"
[resizable] = "false" [responsive] = "false" [(visible)] = "display" [contentStyle] = "{'height': '450px', 'max-height':'450px', 'width':'100% !important'}"
positionTop='150' positionRight='0' positionLeft='0'>
<div class = "divider" style = "margin-top: -1.5%"></div>
<div>
  <ul id = "tabsv1" class = "tabs">
    <li id = "tabsv1-1" class = "tab">
      <a tabindex = "0">
        <a (click)='majorLine()' [ngClass] = "{'active': majorLineItemsActive, 'tab__heading':true}">Add Major Line
          Details</a>
      </a>
    </li>
    <li id = "tabsv1-2" class = "tab">
      <a tabindex = "0">
        <a (click)='minorLine()' [ngClass] = "{'active': minorLineItemsActive, 'tab__heading':true}">Add Minor Line
          Details</a>
      </a>
    </li>
  </ul>
</div>
<div *ngIf='minorLineItemsActive'>
    <div *ngFor='let formGroupDataMinorItems of formGroupDataMinorItems'>
        <div *ngFor='let groupsMinor of formGroupDataMinorItems.groups'>
            <div class = "row half-margin-bottom">
                <div class = "col-md-12">
                 <dynamic-form-multiple [group]='groupsMinor' [groupName]='groupsMinor.groupName' [dataObject] = "groupsMinor.listOfferQuestions"></dynamic-form-multiple>
          </div>
        </div>
        </div>
      </div>
</div>
<div *ngIf='majorLineItemsActive'>
  <div *ngFor='let formGroupData of formGroupData'>
    <div *ngFor='let groups of formGroupData.groups'>
        <div class = "row half-margin-bottom">
            <div class = "col-md-12">
             <dynamic-form-multiple [group]='groups' [dataObject] = "groups.listOfferQuestions"></dynamic-form-multiple>
            </div>
      </div>
    </div>
  </div>
</div>

Из canvas.component.ts я передаю данные JSON в dynamic-form-multiple.html, который будет генерировать несколько форм и полей с несколькими кнопками отправки, но мне нужно иметь одну кнопку отправки для всех форм, которые будут возвращать всю форму в структуре JSON.

ИЛИ

Существуют ли другие способы создания нескольких форм с динамическими полями на одной странице?