我尝试使用Angular Schema Form
简洁概述。
我为BE模型创建了一个JsonSchema,所以我试着将其用于FE输入领域。
如果不注重用户体验的话,这似乎是很方便的。
由于适用于BE/FE共同使用,所以很适合用于内部工具之类的快速开发。
Angular Schema Form
github
好处 chù)
-
- 手軽
- 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がちょっと雑。
使用npm进行安装
-
- 使用npm安装angular-schema-form依赖,保存到开发环境(–save-dev)。
- 使用npm安装angular-schema-form-bootstrap依赖,保存到开发环境(–save-dev)。
基本使用方法
<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 = {};
});
意识到的事情 (qì de shì
-
- Installation, 足りてなかったので躓いちゃった
required を見ていないっぽい。全部必須?