How to preprocess a model value for AngularJS Schema Form

Question

I am using the Angular Schema Form module to create some dynamic forms. The module has been very helpful and straightforward, but I'm new to Angular and have a question about pre-processing some json data.

The scenario: We have some existing json that we'd like to feed into our json schema form application. Most fields work well, but for boolean values our integrators used string values "true" and "false", which Angular Schema Form does not recognize as actual values true and false when parsing (understandably so).

Example, we have this in our schema:

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

And for our actual data we have:

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

I have corrected the issue by changing the checkbox template and adding a directive to it, then performing the conversion logic via the directive. Relevant code:

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>");
}]);

This works, but I have to wonder if this is the correct way to go about this task or if there is a better, more recommended manner? Another concern is that I am changing all of the templates for all form/schema types that use the checkbox.html, because I don't think with this method that I can check that the schema is actually a type "boolean", which I suspect could create an issue...

Creating a directive and processing these anomalies, as suggested by Josef, is much cleaner to provide separation of concerns.

To distill the question further, however, I guess what I'm ultimately asking is this: What is the best way to interject into the process in which the model value is fit to the schema?

Thank you for taking a look and any recommendations are welcome.

Answer 1

Perhaps this is an answer to a different question, but your problem could also be solved by using a schema where isRequired has "type": "string" with "enum": ["true", "false"].

For the form you could use "type": "radiobuttons" and a "titleMap": ["Required", "Not required"] to choose "true"/"false", or write your own custom form type add-on to get a checkbox.