Angular Schema Form - custom object editor

Question

I'm trying to create a simple 'location editor' using the angular-schema-form framework. The plan is to build a map editor widget with a draggable pin.

The json schema for the item is relatively simple:

location: {
    title: "Location",
    type: "object",
    format: "location",
    properties: {
        latitude: {
            "type": "number"
        },
        longitude: {
            "type": "number"
        }
    }
}

This is as far as I've got: http://plnkr.co/edit/tnSdxwrEmRYMNKFzep9f?p=preview

As you can see, editing the name works fine, but editing either of the two location fields doesn't update the model (unless you clear the inputs) and the validation only occurs on the second of the two input elements.

I'm not sure where to look next - I can't find any other examples of an object editor (all examples on github deal with editing a single 'string' item).

Is this supported, and if so, where have I gone wrong?

Cheers!

Answer 1

After spending some more time, I've managed to set up the object editor to map the child properties.

In the editor extension code, I traverse the schema properties to add them to the form object, and then I can map them in the angular html template.

Here's the js code with the additions:

var location = function(name, schema, options) {
  if (schema.type === 'object' && schema.format === 'location') {
    var f = schemaFormProvider.stdFormObj(name, schema, options);
    f.key  = options.path;
    f.type = 'location';
    options.lookup[sfPathProvider.stringify(options.path)] = f;

    // ADDED THIS BIT:
    // map the schema properties to form properties
    f.properties = {};
    angular.forEach(schema.properties, function(v, k) {
      var path = options.path.slice();
      path.push(k);
      if (options.ignore[sfPathProvider.stringify(path)] !== true) {
        var required = schema.required && schema.required.indexOf(k) !== -1;

        var def = schemaFormProvider.defaultFormDefinition(k, v, {
          path: path,
          required: required || false,
          lookup: options.lookup,
          ignore: options.ignore
        });
        if (def) {
          f.properties[k] = def;
        }
      }
    });

    return f;
  }
};
schemaFormProvider.defaults.object.unshift(location);

and the HTML template (with the inputs type='number' rather than 'text') now looks like this:

<div class="form-group" ng-class="{'has-error': hasError()}">

  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>

      <input ng-show="form.properties.latitude.key"
             style="background-color: white"
             type="number"
             class="form-control"
             schema-validate="form.properties.latitude"
             ng-model="$$value$$.latitude" />

      <input ng-show="form.properties.longitude.key"
             style="background-color: white"
             type="number"
             class="form-control"
             schema-validate="form.properties.longitude"
             ng-model="$$value$$.longitude" />

  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>

</div>

I don't know if this is the correct way to do it but it works for my purposes.