Angular Schema Form

Generate forms from a JSON schema, with AngularJS!

Try out the example page

...where you can edit the schema or the form definition and see what comes out!

What is it?

Schema Form is a set of AngularJS directives (and a service..) that can create a form directly from a json schema definition and also validate against that schema. The defaults may be fine for a lot cases, but you can also customize it, changing order and type of fields.

Schema Form is inspired by the nice JSON Form library and aims to be roughly compatible with it, especially it's form defintion. What sets Schema Form apart from JSON Form is that Schema Form aims to be deeply integrated with AngularJS, i.e. to use the standard AngularJS way of handling forms. It also uses tv4 for validation which means its compatible with version 4 of the json schema standard. Schema Form, as a default, generates bootstrap 3 friendly HTML.

Basic Usage

<form sf-schema="schema" sf-form="form" sf-model="data"></form>

function FormController($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.data = {};
}

Documentation

Documentation covering defaults and form types can be found here.

Installation

Simplest way is by using bower since it will also download any dependencies.

bower install angular-schema-form

(or just download the contents of the dist/ folder and add dependencies manually)

It depends on AngularJS (duh!), tv4, and if you like to use the date picker you also need jQuery and pickadate.js

The minified files also includes all templates so they are all you need.

Addons

Currently there is only one addon, a date picker using the excellent pickadate.js.

See the docs for usage.

Contributing

All contributions are welcome! We're trying to use git flow so please base any merge request on the development branch instead of master.