从表单生成表 [英] Generate table from form

查看：43
本文介绍了从表单生成表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个表单组:

public transactionOrRefundRequestForm: FormGroup = new FormGroup({销售请求:新表单组({标题:新表单组({类型:new FormControl('', [Validators.required]),类:new FormControl('', [Validators.required]),MessageCategory: new FormControl('', [Validators.required]),Sale: new FormControl('', [Validators.required]),ID: new FormControl('', [Validators.required]),协议:new FormControl('', [Validators.required]),服务:new FormControl('', [Validators.pattern(/^-?(0|[1-9]\d*)?$/), Validators.maxLength(10)]),}),付款请求:新表单组({销售数据:新表单组({SaleID:新表单组({TransactionID: new FormControl(''),时间戳:new FormControl('')})}),付款交易:新表格组({数量:新的 FormGroup({货币:new FormControl(''),RequestedAmount: new FormControl('')}),专有标签:new FormGroup({打印:new FormControl('')})}),付款数据:新表格组({类型:new FormControl('')})}),})});

我需要从中创建一个表.像这样:

<div class="request-form";formGroupName=SaleToPOIRequest"><div formGroupName="MessageHeader"><表格><头><tr><td><span>MessageHeader</span></td><td class="form-b​​uttons"><按钮颜色=主要"mat-raised-button(点击)=onAddField('SaleToPOIRequest.MessageHeader')">添加字段</button><按钮颜色=主要"mat-raised-button>添加分类</button></td></tr></thead><tr><td><mat-form-field><mat-label>MessageType</mat-label><mat-select formControlName="MessageType"><mat-option [value]="'Request'">Request</mat-option><mat-option [value]="'Response'">Response</mat-option></mat-select></mat-form-field></td></tr><tr><td><mat-form-field><mat-label>MessageClass</mat-label><mat-select formControlName="MessageClass"><mat-option [value]="'Service'">Service</mat-option><mat-option [value]="'Device'">Device</mat-option></mat-select></mat-form-field></td></tr><tr><td><mat-form-field><mat-label>MessageCategory</mat-label><mat-select formControlName="MessageCategory"><mat-option [value]="'Payment'">Payment</mat-option><mat-option [value]="'Input'">Input</mat-option><mat-option [value]="'Diagnosis'">Diagnosis</mat-option><mat-option [value]="'Reconciliation'">Reconciliation</mat-option><mat-option [value]="'TransactionStatus'">TransactionStatus</mat-option><mat-option [value]="'Reversal'">Reversal</mat-option><mat-option [value]="'Admin'">Admin</mat-option><mat-option [value]="'Abort'">Abort</mat-option></mat-select></mat-form-field><td></tr><tr><td><mat-form-field><mat-label>SaleID</mat-label><input formControlName="SaleID";垫输入></mat-form-field></td></tr><tr><td><mat-form-field><mat-label>POIID</mat-label><input formControlName="POIID";垫输入></mat-form-field></td></tr><tr><td><mat-form-field><mat-label>ProtocolVersion</mat-label><input formControlName="ProtocolVersion";垫输入></mat-form-field></td></tr><tr><td><mat-form-field><mat-label>ServiceID</mat-label><input formControlName="ServiceID";垫输入></mat-form-field></td><td><按钮(点击)=onSetRandomServiceID()"；颜色=主要"mat-raised-button>生成随机</button></td></tr></tbody>

<div formGroupName="PaymentRequest"><表格><头><tr><td><span>PaymentRequest</span></td><td class="form-b​​uttons"><按钮颜色=主要"mat-raised-button>添加字段</button><按钮颜色=主要"mat-raised-button>添加分类</button></td></tr></thead><div formGroupName="SaleData"><表格><头><tr><td><span>销售数据</span></td><td class="form-b​​uttons"><按钮颜色=主要"mat-raised-button>添加字段</button><按钮颜色=主要"mat-raised-button>添加分类</button></td></tr></thead><tbody></tbody><div formGroupName=SaleTransactionID"><表格><头><tr><td><span>SaleTransactionID</span></td><td class="form-b​​uttons"><按钮颜色=主要"mat-raised-button>添加字段</button><按钮颜色=主要"mat-raised-button>添加分类</button></td></tr></thead><tr><td><mat-form-field><mat-label>TransactionID</mat-label><input formControlName="TransactionID";垫输入></mat-form-field></td></tr><tr><td><mat-form-field><mat-label>TimeStamp</mat-label><input formControlName="TimeStamp";垫输入></mat-form-field></td></tr></tbody>

<div formGroupName="PaymentTransaction"><表格><头><tr><td><span>PaymentTransaction</span></td><td class="form-b​​uttons"><按钮颜色=主要"mat-raised-button>添加字段</button><按钮颜色=主要"mat-raised-button>添加分类</button></td></tr></thead><tbody></tbody>

我想知道是否有办法以某种方式循环它，如果它是一个组，就像上面的例子那样在 int 中创建一个带有表的 div，如果它是一个控件，则只创建带有输入的 tr.我想到了一种通过 json 实现这一目标的方法，并尝试从中生成它，但我失败了.

如果需要，我会稍后制作一个小提琴.

如果它能够为我选择的某些控件生成一个选择元素，那就太好了.

解决方案

所以我递归地生成了表单，这样我就可以自由地从表单中添加和删除任何项目，解决方案在这里:生成表单槽循环

这就是我从表单递归生成表格的方式:

<div [formGroup]="getFormGroup(formCategory)";class =请求表单"><表格><头><span>{{toCategory(formCategory).name}}</span></thead><ng-container *ngFor=let formEntry of toCategory(formCategory).entries"><ng-container *ngIf=isCategory(formEntry)"><ng-container [ngTemplateOutlet]=formCategoryTemplate"[ngTemplateOutletContext]={$implicit: toCategory(formEntry)}"></ng-容器></ng-容器><tr class="input";*ngIf=isInput(formEntry)"><td><mat-form-field外观=大纲"；类=全角"><mat-label>{{toInput(formEntry).name}}</mat-label><input [formControl]=getFormControl(toInput(formEntry))";垫输入></mat-form-field></td></tr></ng-容器>

</ng-模板><div><form [formGroup]="rebootRequestForm";*ngIf=formStructure"><ng-container [ngTemplateOutlet]=formCategoryTemplate"[ngTemplateOutletContext]={$implicit: formStructure}"></ng-容器></表单>

I have a form group:

public transactionOrRefundRequestForm: FormGroup = new FormGroup({
    SaleRequest: new FormGroup({
      Header: new FormGroup({
        Type: new FormControl('', [Validators.required]),
        Class: new FormControl('', [Validators.required]),
        MessageCategory: new FormControl('', [Validators.required]),
        Sale: new FormControl('', [Validators.required]),
        ID: new FormControl('', [Validators.required]),
        Protocol: new FormControl('', [Validators.required]),
        Service: new FormControl('', [Validators.pattern(/^-?(0|[1-9]\d*)?$/), Validators.maxLength(10)]),
      }),
      PaymentRequest: new FormGroup({
        SaleData: new FormGroup({
          SaleID: new FormGroup({
            TransactionID: new FormControl(''),
            TimeStamp: new FormControl('')
          })
        }),
        PaymentTransaction: new FormGroup({
          Amounts: new FormGroup({
            Currency: new FormControl(''),
            RequestedAmount: new FormControl('')
          }),
          ProprietaryTags: new FormGroup({
            Print: new FormControl('')
          })
        }),
        PaymentData: new FormGroup({
          Type: new FormControl('')
        })
      }),
    })
  });

I need to create a table from this. Something like this:

<form [formGroup]="transactionOrRefundRequestForm">
    <div class="request-form" formGroupName="SaleToPOIRequest">
      <div formGroupName="MessageHeader">
        <table>
          <thead>
          <tr>
            <td>
              <span>MessageHeader</span>
            </td>
            <td class="form-buttons">
              <button color="primary" mat-raised-button (click)="onAddField('SaleToPOIRequest.MessageHeader')">Add Field</button>
              <button color="primary" mat-raised-button>Add Category</button>
            </td>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>MessageType</mat-label>
                <mat-select formControlName="MessageType">
                  <mat-option [value]="'Request'">Request</mat-option>
                  <mat-option [value]="'Response'">Response</mat-option>
                </mat-select>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>MessageClass</mat-label>
                <mat-select formControlName="MessageClass">
                  <mat-option [value]="'Service'">Service</mat-option>
                  <mat-option [value]="'Device'">Device</mat-option>
                </mat-select>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>MessageCategory</mat-label>
                <mat-select formControlName="MessageCategory">
                  <mat-option [value]="'Payment'">Payment</mat-option>
                  <mat-option [value]="'Input'">Input</mat-option>
                  <mat-option [value]="'Diagnosis'">Diagnosis</mat-option>
                  <mat-option [value]="'Reconciliation'">Reconciliation</mat-option>
                  <mat-option [value]="'TransactionStatus'">TransactionStatus</mat-option>
                  <mat-option [value]="'Reversal'">Reversal</mat-option>
                  <mat-option [value]="'Admin'">Admin</mat-option>
                  <mat-option [value]="'Abort'">Abort</mat-option>
                </mat-select>
              </mat-form-field>
            <td>
          </tr>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>SaleID</mat-label>
                <input formControlName="SaleID" matInput>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>POIID</mat-label>
                <input formControlName="POIID" matInput>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>ProtocolVersion</mat-label>
                <input formControlName="ProtocolVersion" matInput>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>ServiceID</mat-label>
                <input  formControlName="ServiceID" matInput>
              </mat-form-field>
            </td>
            <td>
              <button (click)="onSetRandomServiceID()" color="primary" mat-raised-button>Generate Random</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div formGroupName="PaymentRequest">
        <table>
          <thead>
          <tr>
            <td>
              <span>PaymentRequest</span>
            </td>
            <td class="form-buttons">
              <button color="primary" mat-raised-button>Add Field</button>
              <button color="primary" mat-raised-button>Add Category</button>
            </td>
          </tr>
          </thead>
        </table>
        <div formGroupName="SaleData">
          <table>
            <thead>
            <tr>
              <td>
                <span>SaleData</span>
              </td>
              <td class="form-buttons">
                <button color="primary" mat-raised-button>Add Field</button>
                <button color="primary" mat-raised-button>Add Category</button>
              </td>
            </tr>
            </thead>
            <tbody></tbody>
          </table>
          <div formGroupName="SaleTransactionID">
            <table>
              <thead>
              <tr>
                <td>
                  <span>SaleTransactionID</span>
                </td>
                <td class="form-buttons">
                  <button color="primary" mat-raised-button>Add Field</button>
                  <button color="primary" mat-raised-button>Add Category</button>
                </td>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  <mat-form-field>
                    <mat-label>TransactionID</mat-label>
                    <input formControlName="TransactionID" matInput>
                  </mat-form-field>
                </td>
              </tr>
              <tr>
                <td>
                  <mat-form-field>
                    <mat-label>TimeStamp</mat-label>
                    <input formControlName="TimeStamp" matInput>
                  </mat-form-field>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div formGroupName="PaymentTransaction">
          <table>
            <thead>
            <tr>
              <td>
                <span>PaymentTransaction</span>
              </td>
              <td class="form-buttons">
                <button color="primary" mat-raised-button>Add Field</button>
                <button color="primary" mat-raised-button>Add Category</button>
              </td>
            </tr>
            </thead>
            <tbody></tbody>
          </table>

I would like to know if there is a way to somehow loop it and if it's a group create a div with table in int like the example above and if it's a control create just the tr with input. I have thought of one way to achieve this that was trough json and trying to generate it from it but I have failed.

I will create a fiddle in a bit if it's needed.

Also it would be great if it was able to generate a select element for certain controls of my choice.

解决方案

So I generated the form recursively so I can freely add and remove any items from the form and the solution is here: Generate form trough loop

This is how I generated my table from the form recursively:

<ng-template #formCategoryTemplate let-formCategory>
    <div [formGroup]="getFormGroup(formCategory)" class="request-form">
      <table>
        <thead>
        <span>{{toCategory(formCategory).name}}</span>
        </thead>
      </table>

      <ng-container *ngFor="let formEntry of toCategory(formCategory).entries">
        <ng-container *ngIf="isCategory(formEntry)">
          <ng-container [ngTemplateOutlet]="formCategoryTemplate"
                        [ngTemplateOutletContext]="{$implicit: toCategory(formEntry)}">
          </ng-container>
        </ng-container>

        <tr class="input" *ngIf="isInput(formEntry)">
          <td>
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{toInput(formEntry).name}}</mat-label>
              <input [formControl]="getFormControl(toInput(formEntry))" matInput>
            </mat-form-field>
          </td>
        </tr>
      </ng-container>
    </div>
  </ng-template>

  <div>
    <form [formGroup]="rebootRequestForm" *ngIf="formStructure">
      <ng-container [ngTemplateOutlet]="formCategoryTemplate"
                    [ngTemplateOutletContext]="{$implicit: formStructure}">
      </ng-container>
    </form>
  </div>

这篇关于从表单生成表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆