我尝试使用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进行安装

    1. 使用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 を見ていないっぽい。全部必須?

广告
将在 10 秒后关闭
bannerAds