AJSF (Angular JSON Schema Form)

N.B: For Angular6-json-schema-form please check this documentation.

<p align="center"> <a href="https://github.com/hamzahamidi/ajsf/actions?query=workflow%3ACI+branch%3Amain"><img src="https://github.com/hamzahamidi/ajsf/workflows/CI/badge.svg" alt="CI Status"></a> <a href="https://www.npmjs.com/package/@ajsf/core"><img src="https://img.shields.io/npm/dm/@ajsf/core.svg?style=plastic" alt="npm number of downloads"></a> <a href="https://github.com/hamzahamidi/ajsf/blob/master/LICENSE"><img src="https://img.shields.io/github/license/hamzahamidi/ajsf.svg?style=social" alt="LICENSE IMT"></a> <a href="https://app.netlify.com/sites/ajsf/deploys"><img src="https://api.netlify.com/api/v1/badges/6c5b5a1d-db7c-4d0e-8ac1-a4840d8812f0/deploy-status" alt="Netlify Status"></a> </p>

Note: This project is a continuation to dschnelldavis/Angular2-json-schema-form and is not affiliated with any organization.

A JSON Schema Form builder for Angular, similar to, and mostly API compatible with:

• JSON Schema Form's Angular Schema Form for AngularJS (examples)
• Mozilla's React JSON Schema Form for React (examples), and
• Joshfire's JSON Form for jQuery (examples)

Packages

• @ajsf/core
• @ajsf/bootstrap3
• @ajsf/bootstrap4
• @ajsf/material

Check out the live demo and play with the examples

Check out some examples here.

This example playground features over 70 different JSON Schemas for you to try (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted with Material Design, Bootstrap 3, Bootstrap 4, or without any formatting.

Installation

To install from NPM/YARN and use in your own project

If you want to try out the libraries, you can for example install @ajsf/material package from NPM which uses material-angular UI. You can use either NPM or Yarn. To install with NPM, run the following from your terminal:

npm install @ajsf/material@latest

With YARN, run the following:

yarn add @ajsf/material@latest

Then import MaterialDesignFrameworkModule in your main application module like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialDesignFrameworkModule } from '@ajsf/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    MaterialDesignFrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Four framework modules are currently included, the import is the same as above :

• MaterialDesignFrameworkModule from @ajsf/material — Material Design
• Bootstrap3FrameworkModule from @ajsf/bootstrap3 — Bootstrap 3
• Bootstrap4FrameworkModule from @ajsf/bootstrap4 — Bootstrap 4
• JsonSchemaFormModule from @ajsf/core — plain HTML (for testing)

It is also possible to load multiple frameworks and switch between them at runtime, like the example playground on GitHub. But most typical sites will just load one framework.

To install from GitHub

To install the library and the example playground from GitHub, clone https://github.com/hamzahamidi/ajsf.git with your favorite git program. Or, assuming you have git and Node/YARN installed, enter the following in your terminal:

git clone https://github.com/hamzahamidi/ajsf.git ajsf
cd ajsf
yarn install
yarn start

This should start a server with the example playground, which you can view in your browser at http://localhost:4200

The source code is composed as the following:

• projects/ajsf-core - Angular JSON Schema Form main library
• projects/ajsf-bootstrap3 - Framework for Bootstrap 3
• projects/ajsf-bootstrap4 - Framework for Bootstrap 4
• projects/ajsf-material - Framework for Angular Material
• projects/ajsf-core/src/lib/framework-library - framework library
• projects/ajsf-core/src/lib/widget-library - widget library
• projects/ajsf-core/src/lib/shared - various utilities and helper functions
• demo - the demonstration playground example application
• demo/assets/example-schemas - JSON Schema examples used in the playground

If you want detailed documentation describing the individual functions used in this library, check the README in each component. (Angular JSON Schema Form is still a work in progress, so right now this documentation varies from highly detailed to completely missing.)

Using Angular JSON Schema Form

Basic use

For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template:

<json-schema-form
  loadExternalAssets="true"
  [schema]="yourJsonSchema"
  framework="no-framework"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>

Where schema is a valid JSON schema object, and onSubmit calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the demo/assets/example-schemas folder, as described above.

framework is for the template you want to use, the default value is no-framwork. The possible values are:

• material-design for Material Design.
• bootstrap-3 for Bootstrap 3.
• bootstrap-4 for 'Bootstrap 4.
• no-framework for (plain HTML).

Setting loadExternalAssets="true" will automatically load any additional assets needed by the display framework. It is useful when you are trying out this library, but production sites should instead load all required assets separately. For full details see 'Changing or adding frameworks', below.

Data-only mode

Angular JSON Schema Form can also create a form entirely from a JSON object—with no schema—like so:

<json-schema-form
  loadExternalAssets="true"
  [(ngModel)]="exampleJsonObject">
</json-schema-form>

exampleJsonObject = {
  "first_name": "Jane", "last_name": "Doe", "age": 25, "is_company": false,
  "address": {
    "street_1": "123 Main St.", "street_2": null,
    "city": "Las Vegas", "state": "NV", "zip_code": "89123"
  },
  "phone_numbers": [
    { "number": "702-123-4567", "type": "cell" },
    { "number": "702-987-6543", "type": "work" }
  ], "notes": ""
};

In this mode, Angular JSON Schema Form automatically generates a schema from your data. The generated schema is relatively simple, compared to what you could create on your own. However, as the above example shows, it does detect and enforce string, number, and boolean values (nulls are also assumed to be strings), and automatically allows array elements to be added, removed, and reordered.

After displaying a form in this mode, you can also use the formSchema and formLayout outputs (described in 'Debugging inputs and outputs', below), to return the generated schema and layout, which will give you a head start on writing your own schemas and layouts by showing you examples created from your own data.

Also, notice that the 'ngModel' input supports Angular's 2-way data binding, just like other form controls, which is why it is not always necessary to use an onSubmit function.

Advanced use

Additional inputs an outputs

For more control over your form, you may provide these additional inputs:

• layout array with a custom form layout (see Angular Schema Form's form definitions for information about how to construct a form layout)
• data object to populate the form with default or previously submitted values
• options object to set any global options for the form
• widgets object to add custom widgets
• language string to set the error message language (currently supports 'de', 'en', 'es', 'fr', 'it', 'pt', 'zh')
• framework string or object to set which framework to use

For framework, you can pass in your own custom framework object, or, if you've loaded multiple frameworks, you can specify the name of the framework you want to use. To switch between the included frameworks, use 'material-design', 'bootstrap-3', 'bootstrap-4', and 'no-framework'.

If you want more detailed output, you may provide additional functions for onChanges to read the values in real time as the form is being filled out, and you may implement your own custom validation indicators from the boolean isValid or the detailed `validat