oleics/jsonschema-angular.html

## jsonschema-angular.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="http://metawidget.sourceforge.net/js/3.7/metawidget-core.min.js"></script>
    <script src="http://metawidget.sourceforge.net/js/3.7/metawidget-angular.min.js"></script>

    <style>
      .ng-valid {
      }
      .ng-invalid {
        border-color: #f33;
      }
    </style>

    <script>

      angular
        .module('mwDemo', ['metawidget'])
        .controller('mwDemoCtrl', function($scope, $http) {

          $scope.dataModel = {a: {
            b: true,
            c: 'd'
          }};

          $scope.jsonSchema = {
            //"type": "object",
            "properties": {
              "name": {
                "type": "string",
                "placeholder": "A name",
                "required": true
              },
              "description": {
                "type": "string",
                "optional": true
              },
              "homepage": {
                "type": "string",
                "pattern": "^http:"
              },
              "invented": {
                "type": "number",
                "minimum": 1500,
                "maximum": 3000
              },
              "active": {
                "type": "boolean"
              },
              "zipcode": {
                "type": "zipcode",
                "region": "de",
                "required": true
              }
            },
            "additionalProperties": true
          };

          $scope.mwConfig = createMWConfig($scope.jsonSchema, $scope);

          $scope.mwDemoCtrlOptions = {
            jsonSchemaUrl: 'schema.json',
            endpoint: 'post.json'
          };

          $scope.setJsonSchemaUrl = function() {
            $http.get($scope.mwDemoCtrlOptions.jsonSchemaUrl).then(function (data) {
              $scope.jsonSchema = data;
              $scope.mwConfig = createMWConfig($scope.jsonSchema, $scope);
            });
          };

          $scope.saveDataModel = function() {
            console.log($scope.dataModel);
            $http
              .post($scope.mwDemoCtrlOptions.endpoint, $scope.dataModel)
              .then(function(data) {
                alert('saved');
              })
            ;
          };

          $scope.$watch('dataModel.name', function() {
          });
        })
      ;

      function createMWConfig(schema, $scope) {
        console.log(metawidget);
        return {
          inspector: new metawidget.inspector.CompositeInspector([
            new metawidget.inspector.PropertyTypeInspector(),
            new metawidget.inspector.JsonSchemaInspector(schema)
          ]),
          layout: new metawidget.layout.HeadingTagLayoutDecorator(new metawidget.layout.TableLayout( { numberOfColumns: 1 } )),
          widgetProcessors: [
            new metawidget.widgetprocessor.IdProcessor(),
					  new metawidget.widgetprocessor.PlaceholderAttributeProcessor(),
					  new metawidget.widgetprocessor.DisabledAttributeProcessor(),
					  new metawidget.angular.widgetprocessor.AngularWidgetProcessor(),
					  // Own
					  new MyWidgetProcessor($scope) // or simply a function
          ]
        };
      }

      function MyWidgetProcessor($scope) {
        this.$scope = $scope;
      }

      MyWidgetProcessor.prototype.processWidget = function(element, type, inspectResult, mw) {
        console.log('processWidget', arguments);
        var self = this;
        var el = element;

        if(inspectResult.type === 'zipcode') {
          el = document.createElement('input');
          // disable all but numbers from keyboard
          angular.element(el).on('keypress', function(ev) {
            var keyCode = window.event ? ev.keyCode : ev.which;
            // codes for 0-9
            if(keyCode < 48 || keyCode > 57) {
              // codes for backspace, delete, enter
              if(keyCode != 0 && keyCode != 8 && keyCode != 13 && !ev.ctrlKey) {
                ev.preventDefault();
                return;
              }
            }
          }).on('keyup', function(ev) {
            self.$scope.dataModel[inspectResult.name] = ev.target.value;
          });
        }

        return el;
      };

    </script>

    <div ng-app="mwDemo">
      <div ng-controller="mwDemoCtrl">

        <form onsubmit="return false;">
          <div>
            <label for="json-schema-url">Schema URL</label>
            <input ng-model="mwDemoCtrlOptions.jsonSchemaUrl" type="text" id="json-schema-url" value="schema.json">
            <button ng-click="setJsonSchemaUrl()">Set</button>
          </div>
          <div>
            <label for="endpoint">Endpoint URL</label>
            <input ng-model="mwDemoCtrlOptions.endpoint" type="text" id="endpoint" value="post.json">
          </div>
        </form>

        <hr>
        <metawidget ng-model="dataModel" config="mwConfig"></metawidget>
        <button ng-click="saveDataModel()">Save</button>

        <hr>
        {{dataModel.invented}}

      </div>
    </div>
  </body>
</html>

## schema.json
{
  "properties": {
    "name": {
      "type": "string",
      "placeholder": "A name",
      "required": true
    },
    "description": {
      "type": "string",
      "optional": true
    },
    "homepage": {
      "type": "string",
      "pattern": "^http:"
    },
    "invented": {
      "type": "number",
      "minimum": 1500,
      "maximum": 3000
    },
    "active": {
      "type": "boolean"
    },
    "zipcode": {
      "type": "zipcode",
        "region": "de",
      "required": true
    }
  },
  "additionalProperties": true
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
	<script src="http://metawidget.sourceforge.net/js/3.7/metawidget-core.min.js"></script>
	<script src="http://metawidget.sourceforge.net/js/3.7/metawidget-angular.min.js"></script>

	<style>
	.ng-valid {
	}
	.ng-invalid {
	border-color: #f33;
	}
	</style>

	<script>

	angular
	.module('mwDemo', ['metawidget'])
	.controller('mwDemoCtrl', function($scope, $http) {

	$scope.dataModel = {a: {
	b: true,
	c: 'd'
	}};

	$scope.jsonSchema = {
	//"type": "object",
	"properties": {
	"name": {
	"type": "string",
	"placeholder": "A name",
	"required": true
	},
	"description": {
	"type": "string",
	"optional": true
	},
	"homepage": {
	"type": "string",
	"pattern": "^http:"
	},
	"invented": {
	"type": "number",
	"minimum": 1500,
	"maximum": 3000
	},
	"active": {
	"type": "boolean"
	},
	"zipcode": {
	"type": "zipcode",
	"region": "de",
	"required": true
	}
	},
	"additionalProperties": true
	};

	$scope.mwConfig = createMWConfig($scope.jsonSchema, $scope);

	$scope.mwDemoCtrlOptions = {
	jsonSchemaUrl: 'schema.json',
	endpoint: 'post.json'
	};

	$scope.setJsonSchemaUrl = function() {
	$http.get($scope.mwDemoCtrlOptions.jsonSchemaUrl).then(function (data) {
	$scope.jsonSchema = data;
	$scope.mwConfig = createMWConfig($scope.jsonSchema, $scope);
	});
	};

	$scope.saveDataModel = function() {
	console.log($scope.dataModel);
	$http
	.post($scope.mwDemoCtrlOptions.endpoint, $scope.dataModel)
	.then(function(data) {
	alert('saved');
	})
	;
	};

	$scope.$watch('dataModel.name', function() {
	});
	})
	;

	function createMWConfig(schema, $scope) {
	console.log(metawidget);
	return {
	inspector: new metawidget.inspector.CompositeInspector([
	new metawidget.inspector.PropertyTypeInspector(),
	new metawidget.inspector.JsonSchemaInspector(schema)
	]),
	layout: new metawidget.layout.HeadingTagLayoutDecorator(new metawidget.layout.TableLayout( { numberOfColumns: 1 } )),
	widgetProcessors: [
	new metawidget.widgetprocessor.IdProcessor(),
	new metawidget.widgetprocessor.PlaceholderAttributeProcessor(),
	new metawidget.widgetprocessor.DisabledAttributeProcessor(),
	new metawidget.angular.widgetprocessor.AngularWidgetProcessor(),
	// Own
	new MyWidgetProcessor($scope) // or simply a function
	]
	};
	}

	function MyWidgetProcessor($scope) {
	this.$scope = $scope;
	}

	MyWidgetProcessor.prototype.processWidget = function(element, type, inspectResult, mw) {
	console.log('processWidget', arguments);
	var self = this;
	var el = element;

	if(inspectResult.type === 'zipcode') {
	el = document.createElement('input');
	// disable all but numbers from keyboard
	angular.element(el).on('keypress', function(ev) {
	var keyCode = window.event ? ev.keyCode : ev.which;
	// codes for 0-9
	if(keyCode < 48 \|\| keyCode > 57) {
	// codes for backspace, delete, enter
	if(keyCode != 0 && keyCode != 8 && keyCode != 13 && !ev.ctrlKey) {
	ev.preventDefault();
	return;
	}
	}
	}).on('keyup', function(ev) {
	self.$scope.dataModel[inspectResult.name] = ev.target.value;
	});
	}

	return el;
	};

	</script>

	<div ng-app="mwDemo">
	<div ng-controller="mwDemoCtrl">

	<form onsubmit="return false;">
	<div>
	<label for="json-schema-url">Schema URL</label>
	<input ng-model="mwDemoCtrlOptions.jsonSchemaUrl" type="text" id="json-schema-url" value="schema.json">
	<button ng-click="setJsonSchemaUrl()">Set</button>
	</div>
	<div>
	<label for="endpoint">Endpoint URL</label>
	<input ng-model="mwDemoCtrlOptions.endpoint" type="text" id="endpoint" value="post.json">
	</div>
	</form>

	<hr>
	<metawidget ng-model="dataModel" config="mwConfig"></metawidget>
	<button ng-click="saveDataModel()">Save</button>

	<hr>
	{{dataModel.invented}}

	</div>
	</div>
	</body>
	</html>