Create dynamic forms with dynamic form fields with single submit button in angular 7

Question

I have created the dynamic forms with dynamic form fields in Angular 7, but i am unable to maintain single submit button which will return with the value of all the dynamic form.

dynamic-form-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>

dynamic-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);
    }

canvas.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>

From canvas.component.ts i am passing JSON data to dynamic-form-multiple.html which will generate multiple forms and fields with multiple submit buttons, but i need to have one submit button for all the forms which will return the all the form in JSON structure.

OR

Is there any other ways to achieve multiple forms with dynamic form fields on one page?

Answer 1

If I understand your question correctly, you have to get all dynamic-form-multiple component's form data in canvas.component.ts, whenever any one of forms is submitted.

• listen to submit event from dynamic-form-multiple. It looks like <dynamic-form-multiple (submit)="getAllFormsData"></dynamic-form-multiple>
• Also define a method in dynamic-form-multiple.ts by which you iterate through dynamically generated form and return the form data as a json. Let's call it getFormAsJson()
• In canvas.component.ts define getAllFormsData() method that will be called whenever any dynamic form is submitted. To get all dynamic form data you can proceed like below.

export class CanvasComponent {
  @ViewChildren("dynamic-form-multiple") dynamicForms: QueryList<DynamicFormMultiple>

  getAllFormsData() {
    this.dynamicForms.forEach(formComponent => {
      console.log(formComponent.getFormAsJson());
    })
  }
}