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

2024-05-05 • 问答

我想从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>

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

尝试执行以下步骤。

在 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

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

大家都在问