如何在Angular 7中提交时生成HTML表单的JSON

Question

我想从HTML表单生成JSON，以将该表单模板存储在ms sql数据库中。请帮助。

<div class="container">  
<mat-card>  
  <mat-toolbar color="accent">  
    <div align="center" style="color:white;text-align: right;">  
      Create Survey/Template  
    </div>    
  </mat-toolbar>  
<br><br>  
  <mat-card-content>  
    <form [formGroup]="employeeForm"(ngSubmit)="onFormSubmit(employeeForm.value)">  
            <table>  
              <tr>  
                <td class="tbl1">  
                  <mat-form-field class="demo-full-width">  
                    <input formControlName="TemplateName" matTooltip="Enter Template Name" matInput placeholder="Template Name">  
                  </mat-form-field>  
                </td>  
          </tr>  

              <tr>  
                  <td class="tbl1">  
                  <mat-form-field class="demo-full-width">  
                    <input formControlName="Label" matTooltip="Label" matInput placeholder="Label">
                   </mat-form-field> 
                   <mat-form-field>
                   <mat-label>Input Type</mat-label>
                   <select matNativeControl required>
                   <option value="text">Text</option>
                   <option value="number">Number</option>
                   <option value="email">Email</option>
                   </select>
                   </mat-form-field>
                    <button type="button" mat-raised-button color="accent" class="btn btn-danger" matTooltip="Add Input Box" >Add Input Box</button>
                </td>  
                </tr>  

                   <tr>  
                  <td class="tbl1">  
                  <mat-form-field class="demo-full-width">  
                    <input formControlName="Radio Field Question" matTooltip="Radio Field Question" matInput placeholder="Radio Field Question">
                   </mat-form-field> 
                   <mat-form-field>
                  <mat-label>Options</mat-label>
                  <select matNativeControl  name="radioOptions" (change)="RadioSelectChangeHandler($event)" required>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                   </select>    
                  </mat-form-field>
                  <ng-container *ngFor="let field of fieldsArray">
                  <br>
          <input formControlName="RadioFieldOptions" [name]="field+1" matInput placeholder="Radio Option">
          <br>
        </ng-container>

      <button type="button" mat-raised-button color="accent" class="btn btn-danger" matTooltip="Add Radio Button" >Add Radio Button</button>
                </td>  
          </tr>  

        <button type="button" mat-raised-button color="accent" class="btn btn-danger" matTooltip="Create Template" >Create Template</button>
   </table> 
    </form>  
 </mat-card-content>  
</mat-card>  
</div>  

我想将上述表单模板保存在数据库中，稍后再从数据库中呈现该模板。这可能吗？或者我可以尝试采用哪种方法来实现该目标？

Answer 1