1

I was trying to narrow down my problem with the previous post, but that didn't help. Let me explain in detail.

I'm rendering form dynamically through JSON object, and I'm able to render it as expected, for example:

"purpose": {
"label": "Purpose",
"value": "",
"type": "select",
"options": [
  { "label": "(choose one)", "value": ""},
  { "label": "Production", "value": "39100"},
  { "label": "Testing", "value": "39010"}
],
"validation": {
  "required": true
}  }

As next step, I would like to have the options rendered from a function or subscribed data, something like below:

"route": {
"label": "Shuttle Route",
"value": "",
"type": "select",
"function": {
"name": "getShuttleRoute",
"fieldlink": "purpose"
},
"validation": {
  "required": true
}  }

In above code, getShuttleRoute is a function defined in the component, which fetches the dropdown values from a service.

Following code renders the form along with HTML support:

  getForm(id,form){
  this.cat.getCat(id).subscribe(data => {
    this.dataObject = data[0].fields;
    this.objectProps = Object.keys(this.dataObject).map(prop => {
      return Object.assign({}, { key: prop }, this.dataObject[prop]);
    });

    const formGroup = {};
    var tmpAssign : object;
    for (let prop of Object.keys(this.dataObject)) {
      formGroup[prop] = new FormControl(this.dataObject[prop].value || '', this.mapValidators(this.dataObject[prop].validation));
    }
    this.form = new FormGroup(formGroup);
  });  }

I was intending to refer function key from JSON and call respective function to retrieve those dropdown values, though a http.get service.

My idea was to inject the select options by following, but not sure whether this is achievable.

this.objectProps = Object.keys(this.dataObject).map(prop => {
    if (this.dataObject[prop].function){
              return Object.assign({}, { key: prop }, this.dataObject[prop],<append object from service>);}
            });

Any suggestions or help will be greatly appreciated.

FULL JSON:

"fields":{
  "name": {
    "label": "Mailbox Name",
    "value": "",
    "type": "text",
    "placeHolder": "Enter Mailbox Name",
    "validation": {
      "required": true
    }
  },
  "size": {
    "label": "Mailbox Size",
    "value": "",
    "type": "text",
    "placeHolder": "Enter Mailbox Size",
    "validation": {
      "required": true
    }
  },
  "purpose": {
    "label": "Purpose",
    "value": "",
    "type": "select",
    "options": [
      { "label": "(choose one)", "value": ""},
      { "label": "Production", "value": "39100"},
      { "label": "Testing", "value": "39010"}
    ],
    "validation": {
      "required": true
    }
  },
  ,
  "route": {
    "label": "Shuttle Route",
    "value": "",
    "type": "select",
    "function": {
    "name": "getShuttleRoute",
    "fieldlink": "purpose"
    },
    "validation": {
      "required": true
    }
  }
 }
Manu
  • 75
  • 7

1 Answers1

0

I've managed to achieve what I've intended to, by moving the field calculations to the observable, which returns the JSON. When the observable fetches the form fields, it will check for "function", and subscribe to that service and get the dropdown values and append to the object in observable. Finally, it returns the updated object back to getForm function, so the function remains the same.

Manu
  • 75
  • 7