How to set a form value from two other values, in an Array?

[raquintero]

I'm trying to find an example of how to update a field, let's call it ID, that is a concatenation of two fields.
For example, I have a field called "name", a field called "suffix", and a field called "id".
ID field is read only, but gets dynamically set as "name-suffix".
And this is inside an array.

Can someone point me to an example please? Or do I have to triage some random dev branch?

[Anthropic]

Try this, you will need to change the decorator to bootstrap if that's what you are using...

/**
 * I watch fields for changes and then update a key with calculated mathematical string result
 *  
 * @example
 * {
 *   "type":"calculate",
 *   "key":"my.result",
 *   "watch":["product.license.basic","product.license.unified"],
 *   "calculate":"model.product.license.basic + model.product.license.basic / 2 * ( model.product.license.unified / 2)"
 * }
 */
angular
  .module('schemaForm')
  .run(function($templateCache) {
    // A template to use
    $templateCache.put('calculated-fields.html','<span class="calculate" model="model" form="form"></span>');
  })
  .directive('calculate', ['$compile', '$http', 'sfBuilder', 'sfSelect', '$interpolate', 'schemaFormDecorators', 
    function($compile, $http, sfBuilder, sfSelect, $interpolate, schemaFormDecoratorsProvider) {
      return {
        restrict: 'C',
        scope: {
          form: '=',
          model: '='
        },
        link: function(scope, element, attrs) {
          var watchKeys = scope.form.watch,
              key,
              i;

          scope.form.format = scope.form.format || 'number';

          for (i=0; i < watchKeys.length; i++) {
            key = watchKeys[i];

            scope.$watch('model.'+key, function (val, old) {
              var newValue = $interpolate('{{'+scope.form.calculate+'}}', false, null, true)(scope.model);

              if(scope.form.lookup) {
                scope.model.calculated = encodeURIComponent(newValue);
                var lookup = $interpolate(scope.form.lookup, false, null, true)(scope.model);
                $http.get(lookup, { responseType: 'json' })
                  .success(function(response, status) {
                    if(response.data) update(response.data);
                  })
                  .error(function(data, status) {
                    scope.form.options = [];
                    scope.form.selectedOption = '';
                  });
              }
              else {
                update(newValue);
              };

              function update(value) {
                if(scope.form.format == 'number') value = Number(value);
                sfSelect(scope.form.key, scope.model, value);
              };
            });
          }
        }
      };
    }
  ])
  .config(['schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
    function(schemaFormProvider,  schemaFormDecoratorsProvider, sfPathProvider) {
      schemaFormDecoratorsProvider.addMapping(
        'materialDecorator',
        'calculate',
        'calculated-fields.html'
      );
      schemaFormDecoratorsProvider.createDirective(
        'calculate',
        'calculated-fields.html'
      );
    }
  ]);

[raquintero]

@Anthropic Thanks! Would I have to just add this to the bootstrap-decorator.js file, or create a new module? And how would this work in an array? My biggest issue is, again, figuring out which index I am working with, rather than just asking the form/element to tell me.

[Anthropic]

@raquintero it would only work in an array if you defined the indexes, so hopefully I can come up with a solution to that today.

[raquintero]

@Anthropic Do you have a sample of how to use this feature, or does this add field ID's on it's own?

I'm not familiar with webpack, so I need to learn how to build directly from source. Typically I've been cutting and pasting into my current/updated schema-form.js

[Anthropic]

Webpack makes it super easy to watch for changes and auto compile so you can continue what you are doing essentially. Have a look at the scripts run from package.json there's a few there, you do need to run npm and bower installs first before trying to run the builds :)

[kyse]

Sound like a job for the GetterSetter builder. I really need to spend some time on making it an official add on.

[kyse]

#674 has a link and also posted prototype/poc of the GetterSetter builder concept to give you some ideas if your willing to dive in and manipulate some snippets to do your bidding. I built it to take control of binding fields to arrays so I could use arrays on my schema and have the final model object be in line with the api's graph post/patching. To add required entities to the array just add defaults in the schema. But that also requires updating the vendor library to not pass the schema defaults as references. Finally, support conditionally targeting an entity based on unique values of the entity within an array from the form definition.

[Anthropic]

I added this as one of the examples, so I am closing the issue.

Please re-open if you do not feel the question has been answered sufficiently :)

[iseessel]

@Anthropic Hey! I'm trying to use https://github.com/Anthropic/angular-schema-form-calculate; and not having any luck -- I'm using something just like the example under $scope.form, but I'm not hitting any of the code in the link.

I was wondering if you could explain what you meant by: you will need to change the decorator to bootstrap if that's what you are using... as I am using the bootstrap decorator.

[Anthropic]

@iseessel post a plunker in an issue on the add-on repo and I am happy to help you sort it out :)

[iseessel]

@Anthropic Thanks for the response!

I figured out the issue -- I needed to change 'materialDecorator' to 'bootstrapDecorator'. I was unfamiliar with angular-json-schema and just needed to go through the source code a bit.

[nijeshhirpara]

@Anthropic is it possible with angular2-json-schema-form? Any idea would be appreciated.

dschnelldavis/angular2-json-schema-form#63

[Anthropic]

@nijeshhirpara that's not my library and not related at all. Maybe in future if I convert calculate to typescript and angular from ngJS.