json-schema-form/angular-schema-form

Add-on with ng-model="$$value$$" not binding properly in an array

frikinside opened this issue · 2 comments

frikinside commented

Hi,

I'm using the 1.0.0-alpha.5 version.
I've been trying to make and add-on and succeed using the "oldway" of ng-model="$$value$$" and works wonders.
The problem occurs when I set that add on an item of an array.

Expected behaviour

I expect that $$value$$ gets replaced with a proper binding. In the case of an array item property, I expect something like this:
If I set the template like this:

<div>
  <input ng-model="$$value$$" type="text">
</div>

I expect this result:

<div>
  <input ng-model="item['array_property']" type="text">
</div>

Actual behaviour

Instead I'm getting the stringify bracket notation path:

<div>
  <input ng-model="model['array']['']['array_property']" type="text">
</div>

With the "standart" fields definitions I'm having no issue, the binding is setting correctly. Seems like a problem with arrays and custom add-ons only.

Gist/Plunker/Demo

Plunker
In this plunker I 3 properties in the schema:

  • One simple string

  • One string with the add-on

  • An array of objects

Inside the array I set two items properties:

  • One simple string

  • One string with the add-on

As you can see the property outside the array is working properly, but the one inside the array is not.

Thanks in advance!
Kindly regards.

@json-schema-form/angular-schema-form-lead

Anthropic commented

Your template doesn't need $$value$$ but it does need sf-field-model=\"\"

  $templateCache.put(
    "directives/decorators/bootstrap/addontest/addontest.html",
    "<div class=\"form-group\" ng-class=\"{\'has-error\': hasError()}\">\n  <label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label>\n  <input sf-field-model=\"\" type=\"text\" class= \"form-control\">\n  <span class=\"help-block\">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n");
  }]);

If that is executed with the new builders it should work:

    let sfField = sfBuilderProvider.builders.sfField;
    let ngModel = sfBuilderProvider.builders.ngModel;
    let defaults = [ sfField, ngModel ];

    schemaFormDecoratorsProvider.defineAddOn(
      'bootstrapDecorator',
      'addontest',
      'directives/decorators/bootstrap/addontest/addontest.html',
      defaults
    );

Thanks again for taking the time to raise the issue properly and with a plunker!

frikinside commented

Hi!
Sorry for the late response.
First of all there's no need to thank me for raising the issue properly. I thank you for this awesome module.

The defineAddOn method was the key. I didn't realize that it was needed for the new builders to work and thought that it would work with addMapping & createDirective. Lesson learned!

Thanks for taking the time explaining perfectly something that I could read in the docs. That was my mistake.

  • 👍1