Monday, August 10FreeJQuery

angular-schema-form angular 6

Angular Schema Form Angular 6:

Angular Schema Form is a set of AngularJS directives (and a couple of services) to generate Bootstrap 3 ready forms from a JSON Schema.

Features of Angular Schema Form Angular 6:

  • Validates the form using a JSON Schema
  • Fine tune presentation with a form definition, change field types, change order, etc
  • Lots of basic form types out of the box.
  • Supports array with drag’n’drop or in tabs
  • Add-ons for more fanciful stuff like wysiwyg editors, datepickers, colorpickers, font-pickers etc
What is it?

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.
Migration Guide

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.

Basic Usage

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 sfSchemasfForm, and sfModel directives.

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

Leave a Reply

Your email address will not be published. Required fields are marked *