How to preprocess a model value for AngularJS Schema Form - angular-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.

Answer 2

After some more familiarity with Angular, I discovered that directives can be linked several times. My final solution was: instead of mapping an entirely new template to the form item, I check all ngModel items to see if they are booleans and, if they are, I filter their values to convert string "true" to boolean true, as here:
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();
});
}
}
};
});
I'm sure this could be further optimized. If there are any thoughts on cons to this or a suggestion for a better approach please share.