Generate forms from JSON schemas using AngularJS!

Much of the new development is being done in Assimilate, a standardised validator for JSON Schema to help ensure changing validators is never as painful as escaping tv4 is, as well as a new core library to allow for a more predictable upgrade from AngularJS to Angular.

medium.com/@SchemaFormIO / website / @SchemaFormIO / Movie

If you use ASF in your project/company please let us know! We'd love to feature you on the site.

There has been some recent developments in this project that you might want to read about.

Try out the example page. Try editing the schema or form definition and see what comes out!

Hint: By pressing the 'Save to gist' button (top left), you can save your example into a shareable link.

You can find all documentation here, it covers all the different field types and their options.

It also covers how to extend angular schema form with your own field types.

Before filing an issue, please read our issue support instructions or you may be ignored.

Schema Form is a set of AngularJS directives (and a couple of services). It can do two things to make life easier:

1. Create a form directly from a JSON schema.
2. Validate form fields against that same JSON schema.

Schema Form uses convention over configuration, so it comes packaged with some sensible defaults. But you can always customize it by changing the order and types of form fields.

Schema Form is inspired by the nice JSON Form library and aims to be roughly compatible with it, especially its form definition. So what sets Schema Form apart from JSON Form?

1. Schema Form integrates deeply with AngularJS and uses AngularJS conventions to handle forms.
2. Schema Form uses tv4 for validation, making it compatible with version 4 of the JSON schema standard.
3. By default, Schema Form generates Bootstrap 3-friendly HTML.

If you already use the library factories in an app or an add-on or plan to upgrade versions, please read the migration guide for any items that may need consideration.

First, expose your schema, form, and model to the $scope.

angular.module('myModule', ['schemaForm'])
       .controller('FormController', function($scope) {
  $scope.schema = {
    type: "object",
    properties: {
      name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
      title: {
        type: "string",
        enum: ['dr','jr','sir','mrs','mr','NaN','dj']
      }
    }
  };

  $scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];

  $scope.model = {};
});

Then load them into Schema Form using the sfSchema, sfForm, and sfModel directives.

<div ng-controller="FormController">
    <form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>

npm i angular-schema-form@latest

For the latest pre-release (alpha)

npm i angular-schema-form@pre-release

It's simplest to install Schema Form using Bower. If you use the bootstrap decorator use the one from the angular-schema-form-bootstrap repo

bower install angular-schema-form angular-schema-form-bootstrap
bower install angular-schema-form angular-schema-form-bootstrap

This will install the latest release and basic dependencies. See dependencies section below.

You can also load the files via cdnjs.com.

You can also just download the contents of the dist/ folder and add dependencies manually.

Schema form has a lot of dependencies, most of which are optional. Schema Form depends on:

1. AngularJS version 1.3.x is recommended. Version 1.2.x has some limitation. See known limitations.
2. angular-sanitize
3. tv4