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

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

Note: Version 1.x is compliant with Angular <=4, version 2.x is compliant with Angular >=6.

Must Read: Simple E-commerce Beautiful Login Page Template | Responsive-Login-Form

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. 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 {}