标签: angular-schema-form

我在一个应用程序上工作,其核心是一组非常复杂的Web表单.这种复杂性的来源

1. 缩放,一些表格包含大约50页,每页最多30个问题
2. 复杂的规则,例如,如果用户对问题4回答"否",则问题5-15不适用,因此应从表格中删除

目前,我们对表单使用Angular Schema Form,但它没有提供一种在表单字段之间管理大量复杂规则的引人注目的方法.

我对基于规则的编程没有多少经验,但在我看来,这可能提供了一种更好的方法来管理表单字段之间的规则.例如,使用基于规则的方法,我们可以定义与每个表单字段关联的规则,规则引擎可以使用它们来决定下一个要显示的字段.使用我们当前的方法,我们通过大量的命令式JavaScript来实现这一点,这几乎是不可能测试和维护的.

如果有人有开发这种复杂网页表单的经验,我会有兴趣了解他们的经验,例如他们可以推荐的工具/库.我们当前的堆栈基于JDK(Java,Groovy,Grails)和JavaScript(Angular,Node),因此在这些平台上运行的工具/库/框架将特别令人感兴趣.

在我的角度项目中,我需要动态创建一些表单.我为此做了一些谷歌搜索,发现了一个模块角度模式形式.看来这正是我想要的,但问题是我不明白如何保持架构和形式.架构和形式之间有什么关系？

我从表单类型中读取了文档,但对我来说并不是很有帮助.我不想像HIT和TRY那样使用这个模块.我首先想要理解这个概念:架构和形式之间的关系是什么？

我有以下场景:

我有一个包含这种数据的JSON文件:

"IOS_TABLET_DOWNLOAD_URL": {
  "type": "string",
  "minLength": "5",
  "title": "IOS_TABLET_DOWNLOAD_URL",
  "description": "$filter('translate')('configuration.IOS_TABLET_DOWNLOAD_URL')"
},

描述字段需要使用Angular Translate进行翻译,我正在将服务注入到我的控制器中

ConfigController.$inject = ['$scope', '$filter', '$compile', 'MyService'];
function ConfigController($scope, $filter, $compile, MyService) {

  // And using compile
  $scope.schema = elements; // Where element is the object from MyService
  $compile($scope.schema)($scope);

}

但是,$ filter将作为视图中的描述进行未处理打印

"$过滤器( '翻译')( 'configuration.IOS_TABLET_DOWNLOAD_URL')"

编辑

我正在使用Angular Schema Form生成表单.所以基本上我在视图中有这样的东西

<div ng-controller="FormController">
   <form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>

我该怎么做？

我刚开始研究角度模式形式,所以这可能是我在文档或描述中遗漏的东西.

我想要做的是在生成的表单字段的标签旁边和字段本身旁边添加一个图标.像这样:

但开箱即用的angular-schema-form将生成:

我知道我可以制作自己的自定义字段类型,但这是要走的路吗？这需要我重新定义自定义变体中的所有字段类型,因为我需要在所有表单字段中使用这两个图标及其功能.

我希望有一种更简单的方法可以将这个功能添加到生成的html中,并且可以轻松地在它们上添加功能(ng-click功能).

编辑:再次阅读文档后,我发现我需要定义自己的自定义字段类型(https://github.com/Textalk/angular-schema-form/blob/development/docs/extending.md)

根据我收集的内容,我需要将以下内容添加到我的模块配置块中:

schemaFormDecoratorsProvider.addMapping(
    'bootstrapDecorator',
    'custominput',
    'shared/templates/customInput.tpl.html',
    sfBuilderProvider.builders.sfField
);

我还增加的内容shared/templates/customInput.tpl.html来$templatesCache.

但是当我尝试使用类似的模式渲染表单时

"schema": {
    "type": "object",
    "properties": {
        "firstName": {
            "title": "First name",
            "type": "string"
        },
        "lastName": {
            "title": "Last name",
            "type": "custominput"
        },
        "age": {
            "title": "Age",
            "type": "number"
        }
    }
}

我只看到第一个字段(firstName)和年龄.自定义类型只是被忽略.

我试图调试我的问题,但据我所知,自定义字段正确添加到装饰器.我已经尝试了console.log,在schemaFormDecoratorsProvider.decorator()那里我可以看到我的自定义字段类型.

我也尝试$scope.$broadcast('schemaFormRedraw')在我的控制器中启动一个,但我仍然只看到内置字段类型.

作为测试,我试图定义自己的装饰器,覆盖默认的Bootstrap装饰器:

schemaFormDecoratorsProvider.defineDecorator('bootstrapDecorator', {           
    'customType': {template: 'shared/templates/customInput.tpl.html', builder: sfBuilderProvider.stdBuilders},
    // The default is special, if the builder can't find a match it …

Plunker

此plunker允许您编辑网格中的行.我已经创建了一个基于RowEditCtrl的新方法来插入一个新行但是在验证方面遇到了麻烦.

当我插入一个新行时,表单是"原始且有效".在insert方法中,我需要调用$scope.$broadcast('schemaFormValidate')哪个将验证表单并且form.$valid将为false.理想情况下,我想ng-show在保存按钮上调用此检查,以便在表单正常之前不会显示该按钮.

问题是,我不明白或不知道如何$scope在此RowEditCtrl方法中获取模式表单,并且在用户键入任何内容之前无法使表单无效.

function RowEditCtrl($modalInstance, PersonSchema, grid, row) {
  var vm = this;
  
  vm.schema = PersonSchema;
  vm.entity = angular.copy(row.entity);
  vm.form = [
    'name',
    'company',
    'phone',
    {
      'key': 'address.city',
      'title': 'City'
    },
  ];
  
  vm.save = save;
  
  function save() {
    // Copy row values over
    row.entity = angular.extend(row.entity, vm.entity);
    $modalInstance.close(row.entity);
  }
}

我需要一些帮助,请转换一个javascript生成的数组,我准备使用angular-schema-form(需要一个JSON对象).

我使用for循环创建一个数组,其中包含我从$ http请求中检索到的一些字段项.

我能够毫无问题地创建数组,但是当我现在尝试为angular-schema-form对象准备它时,我遇到了将其转换为所需的JSON对象格式的问题.

我在这样的javascript中创建数组,

var objectSchema = [];

for(index = 0; index < instanceFields.length; index++)
{
    var fieldObject = [];

    fieldObject.id = instanceFields[index].id;
    fieldObject.title = instanceFields[index].description;
    fieldObject.type = pass_type;
    fieldObject.value = instanceFields[index].value.raw;

    objectSchema.push(fieldObject);

}

这是数组的console.log.

console.log(objectSchema);

// result

0: Array[0]
   id: "103859"
   length: 0
   title: "Summary"
   type: "string"
   value: ""
1: Array[0]
   id: "101842"
   length: 0
   title: "Job Type"
   type: "string"
   value: "696"

我试图使用JSON.stringify将上面的内容转换为JSON,但这会返回一个空结果.

我也尝试将数组传递给angula.toJson,但我也得到了一个空的结果.

var myJsonString = angular.toJson(objectSchema, true);
console.log(myJsonString);

// result 

[
  [],
  []
]

如果您对我有任何指示,请关注它将不胜感激.

谢谢B

我有一个用于输入一堆值的表单.我想在值上显示各种计算,但是要动态显示,以便在更改数字时立即更新结果.我认为这应该有效,但它没有 - 即计算永远不会运行:

angular.module('calcs', ['schemaForm'])
  .controller('CalcCtrl', function ($scope) {
    $scope.schema = {
      type: 'object',
      properties: {
        width: {
          type: 'number',
          title: 'Width'
        },
        depth: {
          type: 'number',
          title: 'Depth'
        }
      }
    };
    $scope.form = ['*'];
    $scope.model = {};

    $scope.$watch('[model.width, model.depth]', function() {
      // This function is never called
      $scope.area = $scope.model.width * $scope.model.depth;
    });
  });

我已经看到了这个问题,但是我做了很多计算,我真的不想为每个人创建一个指令,所以我希望还有另一种方法.供参考,这是我的模板:

<div ng-controller="CalcCtrl">
  <form sf-schema="schema" sf-form="form" sf-model="model"></form>
  <p>Area: {{area}}</p>
</div>