使用angular 7中的单个“提交”按钮创建具有动态表单字段的动态表单

Question

我已经在Angular 7中使用动态表单字段创建了动态表单，但是我无法维护单个提交按钮，该按钮将返回所有动态表单的值。

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>

动态形式多重

@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>

从canvas.component.ts我将JSON数据传递给dynamic-form-multiple.html，它将生成具有多个提交按钮的多个表单和字段，但是我需要为所有表单提供一个提交按钮，这将返回所有表单在JSON结构中。

要么

还有其他方法可以在一页上使用动态表单字段来实现多种表单吗？

Answer 1

如果我正确理解了您的问题，则无论何时提交任何一种表单，都必须在canvas.component.ts获取所有dynamic-form-multiple组件的表单数据 。

• 监听从dynamic-form-multiple提交事件。 看起来像<dynamic-form-multiple (submit)="getAllFormsData"></dynamic-form-multiple>
• 还要在dynamic-form-multiple.ts定义一个方法，您可以通过该方法遍历动态生成的表单并将表单数据作为json返回。 我们称之为getFormAsJson()
• 在canvas.component.ts限定getAllFormsData()每当任何动态表单提交将被调用的方法。 要获取所有动态表单数据，您可以按照以下步骤进行。

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

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