3

我正在使用Angular Schema Form模块来创建一些动态表单。该模块非常有用且简单明了，但我是 Angular 的新手，并且对预处理一些 json 数据有疑问。

场景：我们有一些现有的 json，我们想将它们输入到我们的 json 模式表单应用程序中。大多数字段运行良好，但对于布尔值，我们的积分器使用字符串值“true”和“false”，Angular Schema Form在解析时 不会将其识别为实际值true和false （可以理解）。

例如，我们的架构中有这个：

{
    ....
    "isRequred":{
      "type":"boolean",
      "title":"Required"
    }
    ....
}

对于我们的实际数据，我们有：

{
   ...
   "isRequired":"true"
   ...
}

我已通过更改复选框模板并向其添加指令，然后通过指令执行转换逻辑来纠正此问题。相关代码：

angular.module('jsonFormBuilderApp').directive('stringToBoolean', function($parse){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {

       var value = scope.$eval(attrs.ngModel);
       var boolvalue = (value === true || value === 'true');
       modelCtrl.$setViewValue(boolvalue);
       modelCtrl.$render();

     }
   };
});

angular.module('schemaForm').run(['$templateCache', function($templateCache) {
  $templateCache.put("directives/decorators/bootstrap/checkbox.html","<div ... copy the template from bootstrap decorators and add string-to-boolean to the input field ...> </div>");
}]);

这行得通，但我想知道这是否是完成这项任务的正确方法，或者是否有更好、更推荐的方式？ 另一个问题是我正在更改使用 checkbox.html 的所有表单/模式类型的所有模板，因为我不认为使用这种方法可以检查模式实际上是“布尔”类型，我怀疑可能会造成问题...

正如 Josef 所建议的那样，创建一个指令并处理这些异常，对于提供关注点分离来说要干净得多。

然而，为了进一步提炼这个问题，我想我最终要问的是：插入模型值适合模式的过程的最佳方法是什么？

感谢您的浏览，欢迎提出任何建议。

4

2 回答 2

1

也许这是对另一个问题的答案，但您的问题也可以通过使用isRequired"type": "string"与"enum": ["true", "false"].

对于您可以使用的表单"type": "radiobuttons"和"titleMap": ["Required", "Not required"]选择"true"/ "false"，或编写您自己的自定义表单类型插件以获取复选框。

于 2015-04-09T13:41:14.553 回答
0

在熟悉了 Angular 之后，我发现指令可以链接多次。我的最终解决方案是：我没有将一个全新的模板映射到表单项，而是检查所有 ngModel 项以查看它们是否为布尔值，如果是，我过滤它们的值以将字符串“true”转换为布尔值 true，如此处：

angular.module('schemaForm')
 .directive('ngModel', function() {
   return {
     priority: 1001,
     link: function(scope, element, attrs) {

       if(typeof(scope.form) !== 'undefined' && scope.form.schema.type === 'boolean') {
         scope.$watch(attrs.ngModel,function() {
           var value = scope.$eval(attrs.ngModel);
           var boolvalue = (value === true || value === 'true' || value === '1');
           scope.ngModel.$setViewValue(boolvalue);
           scope.ngModel.$render();
         });
       }

     }
   };
});

我相信这可以进一步优化。如果对此有任何想法或建议更好的方法，请分享。

于 2015-05-05T18:29:47.027 回答