Angular Schema Formを触ってみた。

TL;DR;

BEのモデルのためにJsonSchema作ったので、FEの入力周りにもそれを流用するべく試してみた。
UXにこだわらないなら便利そう。
BE/FE共通にできるので、社内ツールとかぺろっと作るのには捗る。

• Angular Schema Form
  • github

メリット

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

デメリット

• templateがいじりづらいのでUI改善が面倒
• ControllerにViewの定義を書くのが嫌だ
  • テキスト入力以外を使うときに、scopeのform定義にヅラヅラと追記する… ref. (doc)[https://github.com/json-schema-form/angular-schema-form/blob/development/docs/index.md#overriding-field-types-and-order]
• Documentがちょっと雑。

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, 足りてなかったので躓いちゃった
• required を見ていないっぽい。全部必須?