Question

我正在使用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的所有表单/模式类型的所有模板，因为我不认为使用此方法我可以检查模式实际上是一个类型“boolean” ，我怀疑可能会产生问题......

按照约瑟夫的建议，创建一个指令并处理这些异常，可以更清晰地提供关注点分离。

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

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

Answer 1

也许这是对不同问题的回答，但您的问题也可以通过使用架构解决，其中isRequired "type": "string"与"enum": ["true", "false"]。

对于表单，您可以使用"type": "radiobuttons"和"titleMap": ["Required", "Not required"]来选择"true" / "false"，或者编写自己的自定义表单类型添加 - 获得一个复选框。

Answer 2

在对Angular更熟悉之后，我发现指令可以链接多次。我的最终解决方案是：不是将全新模板映射到表单项，而是检查所有ngModel项以查看它们是否为布尔值，如果是，则我过滤它们的值以转换字符串＆＃34; true＆＃34; to boolean 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();
         });
       }

     }
   };
});

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

如何预处理AngularJS Schema Form的模型值

2 个答案: