Edited at

Angular Schema Formを触ってみた。

More than 3 years have passed since last update.


TL;DR;

BEのモデルのためにJsonSchema作ったので、FEの入力周りにもそれを流用するべく試してみた。

UXにこだわらないなら便利そう。

BE/FE共通にできるので、社内ツールとかぺろっと作るのには捗る。


メリット


  • 手軽

  • JsonSchemaでBEとの整合性保ちやすい


デメリット


Install w/ NPM


  1. npm install angular-schema-form --save-dev

  2. npm install angular-schema-form-bootstrap --save-dev


Basic Usage

<div ng-controller="FormController">

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

require('angular');

require('angular-sanitize');
require('tv4');
require('objectpath');
require('angular-schema-form');
require('angular-schema-form-bootstrap');

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 = {};
});


気づいたこと


  • Installation, 足りてなかったので躓いちゃった:cry:


  • required を見ていないっぽい。全部必須?