如何在 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

尝试按照以下步骤操作。

在app.module.ts

中添加代码

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

在你的app.component.html

<h1> Template-Based Contact Form Example </h1>

<form #myform = "ngForm" (ngSubmit) = "onSubmit(myform)" >
  <input type = "text" name = "fullName" placeholder = "Your full name" ngModel>
  <br/>

  <input type = "email" name = "email" placeholder = "Your email" ngModel>
  <br/>

  <textarea name = "message" placeholder = "Your message" ngModel></textarea>
  <br/>
  <input type = "submit" value = "Send">
</form>

在你的app.component.ts

import { Component } from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  onSubmit(form: NgForm) {
      console.log('Your form data : ', form.value);
  }
}

我们将代表我们表单的 NgForm 对象的引用传递给 onSubmit() 方法，我们可以使用它来访问各种属性，例如 value，它提供了一个包含表单属性及其值的普通 JS 对象。在此示例中，我们只是在控制台中打印表单值，但在现实世界中，我们可以使用它通过 POST 请求将数据发送到服务器。

您可以从文档中查看 NgForm 的所有可用方法。

您可以在浏览器控制台中看到数据。请试试这个。希望这会帮助你。

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

How to generate JSON of a HTML form on submit in Angular 7

html

json

angular

angular7