[Ngx] HTML Form Generation Based On JSON Schema


Ngx Schema Form is an Angular 2+ module that allows you to instantiate an HTML form from a JSON schema.

generate ui from json, json form builder drag and drop, json to form, json forms example, form io json schema, json to html form, json schema form generator


  • Create a model from a single JSON schema object
  • Create a form from a virtual set of HTML structures
  • Allow initialization from previous values
  • Verification is processed by z-scheme
  • Allow injection of custom authentications
  • Allow advertising of custom widgets
  • Allow injection of custom links (NEW!)

How to make use of it:

1. To use the Ngx Schema model in your project, simply run the following command:

npm install ngx-schema-form --save

2. When using *.json files, you can declare them with the $schema property to allow your IDE’s autocomplete to help you build a sample schema.

  "$schema": "./node_modules/ngx-schema-form/ngx-schema-form-schema.json",
  "title": "My awesome schema-form"

3. Our goal here is to create a simple login form.

// app.component.ts

import { Component } from "@angular/core";

  selector: "minimal-app",
  // Bind the "mySchema" member to the schema input of the Form component.
  template: '<sf-form [schema]="mySchema"></sf-form>',
export class AppComponent {
  // The schema that will be used to generate a form
  mySchema = {
    properties: {
      email: {
        type: "string",
        description: "email",
        format: "email",
      password: {
        type: "string",
        description: "Password",
      rememberMe: {
        type: "boolean",
        default: false,
        description: "Remember me",
    required: ["email", "password", "rememberMe"],

4. Create a module that imports AppComponent and configures the Ngx schema model.


import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import {
} from "ngx-schema-form";
import { AppComponent } from "./app.component";

  imports: [SchemaFormModule.forRoot(), BrowserModule],
  declarations: [AppComponent],
  providers: [{ provide: WidgetRegistry, useClass: DefaultWidgetRegistry }],
export class AppModule {}

Form Generation Based On JSON, Ngx Schema Form Plugin/Github, simple form creation using json metadata

See Demo And Download

Official Website(guillotinaweb): Click Here

This superior jQuery/javascript plugin is developed by guillotinaweb. For extra Advanced usage, please go to the official website.