I am trying to generate a form from a JSON to build an object. This object may include subobjects. The JSON looks like this:
[{key:'name',
name: 'Name',
type:'STRING'},
{key:'type',
name:'Type',
type:'SELECT',
choices:[{
value:'choice1',
name:'Choice 1'}]},
{key:'connection',
name:'Connection',
type:'OBJECT',
properties:[{
key:'ip',
name: 'IP-Adress',
type: 'STRING'},
{key:'port',
name:'Port',
type: 'NUMBER'}]}]
My html looks like this:
<form role="form" name="form" class="css-form">
<div class="form-group" ng-repeat="field in json">
<label>{{field.name}} :</label>
<div ng-if="field.type==='OBJECT'" ng-repeat="nextField in field.properties">
<input ng-if="nextField.type==='STRING'" ng-model="sessionEntity[field.key][nextField.key]" type="text" class="form-control">
<input ng-if="nextField.type==='NUMBER'" ng-model="sessionEntity[field.key][nextField.key]" type="number" class="form-control" style="width:50px">
<select ng-if="nextField.type==='SELECT'" class="form-control" ng-model="sessionEntity[field.key][nextField.key]" ng-options="option.value as option.name for option in nextField.choices">
</select>
</div>
<input ng-if="field.type==='STRING'" ng-model="sessionEntity[field.key]" type="text" class="form-control">
<input ng-if="field.type==='NUMBER'" ng-model="sessionEntity[field.key]" type="number" class="form-control" style="width:50px">
<select ng-if="field.type==='SELECT'" class="form-control" ng-model="sessionEntity[field.key]" ng-options="option.value as option.name for option in field.choices">
</select>
</div>
</form>
sessionEntity looks like this:
{name: 'Name',
type:'choice1',
connection:{ip:'192.168.0.1',port:8000}}
This works for objects with a property of type 'OBJECT' on the first level. But I don't know in advance how deep the nesting goes.
I tried to put a function in 'ng-model' but Expression '{0}' is non-assignable. Element: {1}
.
I could extend the html-code to check again on every deeper level, but that is not a satisfying solution and results in a whole lot of redundant code.
Does someone know how to solve this in a fancy way?