[Ngx] HTML Form Generation Based On JSON Schema

ngx-schema-form

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

Features

  • 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";

@Component({
  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.

//app.module.ts

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

@NgModule({
  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.