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

Question

I want to generate JSON from a HTML form to store that form template in ms sql database. Please help.

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

I want to save above form template in database and later want to render that template from database. Is this possible? Or what approach I can try to achieve that goal?

Answer 1

Try to follow below steps.

add the code in 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 { }

in your 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>

in your 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);
  }
}

We passed in the reference to the NgForm object that represents our form to the onSubmit() method and we can use it to access various properties like value which provides a plain JS object that contains the attributes of the form and their values. In this example, we simply print the form value in the console but in a real world situation, we can use it to send the data to a server via a POST request.

You can see all the available methods of NgForm from the docs.

You can see the data in your browser console. Please try this. hope this will help you.