Delete last item of array instead of current one

[MGouaillier4CT]

Hello.

I have this problem using angular schemaform.

When i want to delete an arrray field with a custom field in it, it deletes the last implemented array field instead of the current one

See exemple here : http://recordit.co/DwUSJHCRQ6

For your information this bug only occurs when i'm using a custom field type, i have another array with only number types, and this bug doesn't appear.

InputSchema :

"base_network_sections_not_to_be_cut": {
                                "title": "Sections de route a ne pas couper",
                                "type": "array",
                                "description": "{object_type:\"road\", values:\"objectid\"}",
                                "items": {
                                    "type": "string"
                                }
                            },

formSchema :

{
    "type": "fieldset",
    "title": "Section du réseau de base à ne pas couper",
    "htmlClass": "form-group form-border",
    "items": [
      {
        "type": "section",
        "htmlClass": "wrapper",
        "items": [
          {
            "type": "section",
            "htmlClass": "row array-field",
            "items": [
              {
                "key": "base_network_sections_not_to_be_cut",
                "title": "Section du réseau de base à ne pas couper par les barrières géographiques",
                "description": "",
                "htmlClass": "array-button",
                "add": "Ajouter un city object",
                "style": {
                  "add": "btn-info"
                },
                "items": [
                  {
                    "key": "base_network_sections_not_to_be_cut[]",
                    "type": "cityobjectpicker"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },

I'm not sure where the problem comes from. Have you already seen a bug like this ?

[Anthropic]

@MGouaillier what does your custom type definition look like, if you use a default type it works so I suspect the custom type is not taking into account it's position in an array, normally a custom type would handle the array and the custom type would replace the usage of array as they do behave differently.

[MGouaillier4CT]

This is what my type definition looks like :

angular.module('schemaForm').config(['schemaFormProvider',
  'schemaFormDecoratorsProvider', 'sfPathProvider',
  function (schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {

    // First, we want this to be the default for a combination of schema parameters

    var cityobjectpicker = function (name, schema, options) {
      if (schema.type === 'string' && schema.format == 'cityobjectpicker') {
        // Initiate a form provider
        var f = schemaFormProvider.stdFormObj(name, schema, options);
        f.key = options.path;
        f.type = 'cityobjectpicker';
        // Add it to the lookup dict (for internal use)
        options.lookup[sfPathProvider.stringify(options.path)] = f;
        return f;
      }
    };
    // Add our default to the defaults array
    schemaFormProvider.defaults.string.unshift(cityobjectpicker);

    // Second, we want it to show if someone have explicitly set the form type
    schemaFormDecoratorsProvider.addMapping('bootstrapDecorator', 'cityobjectpicker',
      'utils/schema-form-cityobjectpicker/cityobjectpicker.html');
  }]);

We followed this tutorial to create our own custom field : https://github.com/json-schema-form/angular-schema-form/blob/development/docs/extending.md

[Anthropic]

@MGouaillier because your key ends with [] it needs to handle an array, does your template have sf-array?

[MGouaillier4CT]

@Anthropic After your answer I checked and i couldn't find any traces of an "sf-array" directive.
So i checked the documentation and i didn't understand where to put this directive.

Could you enlighten me about this ?

Here is the code where i call both of my schemas and the model

<schema-form
                  fc-form-model="scenarioItemModel"
                  fc-form-schema="scenarioItemSelectedFormSchema"
                  fc-json-schema="scenarioItemSelected.inputSchema"
                  fc-form-disabled="false"
                  fc-form-submit="saveAction"
                  fc-form-transversal-data-city-object="transversalData_cityObject"
                  fc-form-transversal-data-polygon="transversalData_polygon">
</schema-form>

Thank you !

EDIT : Sorry this wan't the file you were looking for, here is the template of the custom field

<div class="cityobjectpicker"
     ng-class="{'has-error': hasError(), 'focused' : localPickerState.isFocused, 'active' : localPickerState.isActive, 'incomplete' :(!localPickerState.isFocused && !localPickerState.pickingIsDone)}"
     ng-controller="cityobjectPickerControllerFunction" ng-click="focusOnLocalPicker()">

  <!-- Specify the model for the directive and add the directive, making the controller available to the children-->
  <div layout="row" ng-model="$$value$$" cityobject-picker-directive>

    <!-- Bind the input to the model via a hidden input -->
    <input ng-hide="true" ng-model="$$value$$">


    <span flex='30' class="picker-button">


      <span ng-show="localPickingState == 'TODO'">
        <md-button type="button" class="btn btn-info" ng-click="startPicking()">
          <span translate>Pick</span>
        </md-button>
      </span>

      <!--<span ng-show="localPickingState == 'PENDING'">
        <md-button type="button" ng-disabled="!localPickerState.isAvailable" class="btn btn-info btn-can-be-disabled"
                   ng-click="validateCityObject()">
          <span translate>Validate</span>
        </md-button>
        <md-button type="button" ng-disabled="!localPickerState.isAvailable " class="btn btn-info btn-can-be-disabled"
                   ng-click="cancelPicking()">
          <span translate>Cancel</span>
        </md-button>
      </span> -->

    </span>


    <span flex='70' class="picker-value">


      <span ng-show="!localPickerState.pickingIsDone">
          <span ng-show="localPickerState.isFocused">
            <span translate>Please select a city object</span>
            <span class="moving-dots"> <span>.</span><span>.</span><span>.</span></span>
          </span>
          <span ng-show="!localPickerState.isFocused">
            <span class="error-message"><span translate>Don't forget to pick !</span></span>
          </span>
      </span>

    <span ng-show="localPickerState.pickingIsDone">
      <span ng-show="displayValue !== undefined">
          <div class="picked-object-title"><span translate>Picked city object</span> :</div>
          <div class="picked-object-details">
            <div class="picked-object-detail uid-type">
              <span><span class="detail-label">Type</span> :</span>
              <span>{{displayValue.cityObjectType}}</span>
            </div>
            <div class="picked-object-detail uid-detail">
              <span><span class="detail-label">UID</span> :</span>
              <span>{{displayValue.uid}}</span>
            </div>
          </div>

        </span>
    </span>



    </span>


  </div>
  <!-- hasError() and the other functions are also defined by ASF, so this will either
      show a validation error or the description -->
  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
  <br/>


</div>

[Anthropic]

@MGouaillier I'm having trouble seeing from the code what would be your issue, can you make a plunker from it?

[Anthropic]

My initial comment was that it would be easier to handle if your decorator handled the whole aray, additionally if your type was an object with another key within it, rather than just a string, this would also be easier to work with. I've found string array to be a bit fiddly in the past myself when it comes to custom decorators.

[gtarsiguel]

Hello @Anthropic ,

I am a colleague of @MGouaillier working on this issue. Thanks for taking the time to answer, it is indeed a thorny problem we have here.

I just want to make sure I understand well your answer. I am not sure what you mean by :

if your type was an object with another key within it, rather than just a string, this would also be easier to work with

Here is my understanding of the situation we have here :
The custom type "cityobjectpicker" takes the place of a "string" type input. Therefore it returns a sting. The array logic is managed by angular-schema-form, hence indeed the issue when deleting.
And you advice us to use instead a customtype "cityobjectarraypicker" that would take the place of an "array" type input (I'm not even sure that exists). This way, the new custom type will deal with all the array logic, including the delete, and returns an array of string.
Is it what you suggest ?

I think the issue comes from a desyncronisation between the "array of picker" (dealt by angular-schema-form) and the "array of values" (dealt by the custom pickers themselves). Is there no other way to manually sync them, for example by handling the event "deleteFromArray($index)" ? I tried but no success so far.

[Anthropic]

@gtarsiguel sorry, my suggestions were not very related and not clear enough.

You have your array format currently like:
base_network_sections_not_to_be_cut[ "string1", "string2" ]

If instead you had
base_network_sections_not_to_be_cut[ {city:"string1"}, {city:"string2"} ]

Then in your form definition you could have:

"key": "base_network_sections_not_to_be_cut[]
"type": "array"
    "key": "base_network_sections_not_to_be_cut[].city"
    "type": "cityobjectpicker"

I think this would be easier for you to handle in your decorator as you then don't need to handle any array logic yourself.

If you make a plunker I am happy to help you get it working :)

[gtarsiguel]

Hi, thanks for your quick answer !
I've never "plunked" before but I'll try to make a simple one that reproduces the issue.

[Anthropic]

No rush I am about to go to sleep and wont have a chance to look till tomorrow night...

[gtarsiguel]

Hi,

We've finally fixed the issue. Not sure what exatcly fixed it, apparently some data declarations were missing to perform a correct binding with the model.

It seems adding the following line is what fixed the problem (in the overall wrapping div of the html template of the custom schema form input) :
<div ng-model="$$value$$" schema-validate="form" name="{{form.key.slice(-1)[0]}}" required>

Thanks again for your help, appreciate,
Cheers

[Anthropic]

@gtarsiguel @MGouaillier glad it is working and thanks for closing the ticket and reporting the resolution for others! :)