Update Values on array-values broken?!

[stretau]

Describe the bug which template:

• [x ] Bootstrap4FrameworkModule — Bootstrap 4

A clear and concise description of what the bug is.

To Reproduce It seems there is something broken with Updating the form value correctly when using array-types. But maybe I do sth. wrong

Eventually consider this PR in angular2-json-schema-form: https://github.com/dschnelldavis/angular2-json-schema-form/pull/304

I have written my own widget which use ng-select https://github.com/ng-select/ng-select:

import {Component, Input, OnInit} from "@angular/core";
import {JsonSchemaFormService} from "angular6-json-schema-form";
import {AbstractControl} from "@angular/forms";

@Component({
    selector: 'my-ngselect-widget',
    templateUrl: 'my-ng-select.component.html'
})
export class MyNgSelectComponent implements OnInit {

    formControl: AbstractControl;
    controlName: string;
    controlValue: any;
    controlDisabled = false;
    boundControl = false;
    options: any;
    @Input() layoutNode: any;
    @Input() layoutIndex: number[];
    @Input() dataIndex: number[];

    //items$ : Observable;
    items = ["one", 'Two', "three"];

    constructor(
        private jsf: JsonSchemaFormService
    ) { }

    ngOnInit() {
        this.options = this.layoutNode.options || {};
        this.jsf.initializeControl(this);
    }

    updateValue(value) {

        // on option "multiple" value is an array
        console.log("ng select value", value);

        this.jsf.updateValue(this, value);
    }
}

This Component I successfully register as new Widget for angular6-json-schema-form. My ng-select component is rendered successfully. But if I activate the "multiple"-Option, the value in "updateValue" is an array. Because of this my Schema is like this:

"schema" : {
              "properties": {
                "inv_code": {
                  "description": "Invoice no.",
                  "type": "string"
                },
                "inv_amount": {
                  "description": "Amount",
                  "type": "number"
                },
                "inv_reason" : {
                  "type" : "array",
                  "description" : "reason",
                  "items" : {
                    "type" : "string"
                  },
                  "default" : []
                }
              },
              "required" : [ "inv_code", "inv_amount"]
            },
            "layout" : [
              {
                "type" : "fieldset",
                "items" : [
                  {
                    "key": "inv_code"
                  },
                  {
                    "key" : "inv_amount"
                  },
                  {
                    "key" : "inv_reason",
                    "type" : "ngselect",
                    "options" : {
                      "multiple" : true
                    }
                  }
                ]
              }
            ]
}

If I add one value from ng-select. Everything is fine. The form value for inv_reason is an array which contains the first selected option. But if I add one more item, then console.log error occured with the following:

ERROR Error: Must supply a value for form control at index: 0.
    at forms.js:3636
    at forms.js:3614
    at Array.forEach (<anonymous>)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._forEachChild (forms.js:3614)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._checkAllValuesPresent (forms.js:3634)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValue (forms.js:3478)
    at JsonSchemaFormService.push../node_modules/angular6-json-schema-form/fesm5/angular6-json-schema-form.js.JsonSchemaFormService.updateValue (angular6-json-schema-form.js:6330)
    at MyNgSelectComponent.push../src/app/plugins/jschema-form/widget/ngx-schema-form/object/my-ng-select.component.ts.MyNgSelectComponent.updateValue (my-ng-select.component.ts:39)
    at Object.eval [as handleEvent] (MyNgSelectComponent.html:17)
    at handleEvent (core.js:10258)

Expected behavior The array-value should be correct updated in the form.

I'm using Angular 6 and the latest version of this package here.

Thx in advance, Best Regards

[neil-coutinho]

@stretau did you find a workaround for this? Facing the same issue

[github-actions[bot]]

Stale issue

[karthikchintala64]

I am facing same issue. Please let me know if there is any workaround.

[bogdanbaghiu]

Possible solution:

updateValue(event) {
   const lValues = event.value.map(item => {
      return `${item}`;
   }).join(',');
   this.jsf.updateValue(this, `[${lValues}]`);
}

This method saves an array in jsf.data

[karthikchintala64]

Ended up doing below.

updateValue(event) { const formArray = this.jsf.getFormControl(this) as FormArray; if ((!event || event.length === 0) && formArray && formArray.controls) { while (formArray.controls.length > 0) { formArray.removeAt(0); } } this.jsf.updateValue(this, event); }