formio / angular-demo

A Demo application with Angular + Form.io

Home Page:https://formio.github.io/angular-demo/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Form Builder: Adding static values through json on Select Component is not persistent.

Vedhachala opened this issue · comments

when i run the code locally on my machine, I face a issue in the select component UI of the form builder,
i.e, when i give json directly to the builder, the label and values are not added in the default values of the select component.
This happens in angular 6 version.

Reproducing steps :

  1. Add a Select component json which has static values to the form variable in the constructor of /src/app/forms/builder.component.ts.

`
@component({
selector: 'app-builder',
templateUrl: './builder.component.html',
styleUrls: ['./builder.component.scss']
})
export class BuilderComponent implements AfterViewInit {
@ViewChild('json') jsonElement?: ElementRef;
@ViewChild('code') codeElement?: ElementRef;
public form: Object;
constructor(public prism: PrismService) {
this.form = {
components: [
{
"label": "Brand",
"placeholder": "Select Brand",
"mask": false,
"type": "select",
"input": true,
"key": "brand",
"data": {
"values": [
{
"label": "Dell",
"value": "dell"
},
{
"label": "HP",
"value": "hp"
},
{
"label": "Lenovo",
"value": "lenovo"
}
]
},
"defaultValue": "",
"properties": [
{
"key": "",
"value": ""
}
],
"valueProperty": "value",
"selectValues": "",
"disableLimit": false,
"searchField": "",
"clearOnRefresh": false,
"reference": false,
"logic": []
}
]};

}

onChange(event) {
this.jsonElement.nativeElement.innerHTML = '';
this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));
}

ngAfterViewInit() {
this.prism.init();
}
}
`

  1. go to http://localhost:4200/forms/builder , the builder that is rendered is like this:

select component

select component data

We can see the data source values are empty whereas it should show the three label and values given in the json.

Refer this link -- http://formio.github.io/formio.js/app/examples/custombuilder.html.
And i have a doubt,In this how to give static data to key and value which is not working for me.I had declared as... properties: [
{
key: "test",
value: "data"
}
],
But it is not showing except this remaining are working fine...