How to change element to input or dropdown in angular form?

Question

I am making angular 6 application, where i am using angular dynamic form and the values are coming from JSON..

Simple JSON:

  jsonData: any = [
    {
      "elementType": "dropdown",
      "key": 'project',
      "label": 'Choose option to display',
      "options": [
        { "key": 'inputbox', "value": 'Show Project Level as input box' },
        { "key": 'dropdown', "value": 'Show Project Level as dropdown' }
      ],
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_level",
      "label": "Project Level as input box",
      "type": "text",
      "value": "",
      "order": 2
    },
    {
      "elementType": "dropdown",
      "key": 'project_level',
      "label": 'Choose Project Level as dropdown',
      "options": [
        { "key": 'low', "value": 'Low' },
        { "key": 'medium', "value": 'Medium' },
        { "key": 'high', "value": 'High' }
      ],
      "order": 2
    }
  ];

Requirement is going to be from this json only..

Take a look at Clear working example https://stackblitz.com/edit/angular-x4a5b6-5ys5hf,

You can see at initial stage i am having both input box and dropdwon.. But i need to have text box alone at first if i choose the Show Project Level as dropdown from first dropdown, then the project_level key needs to change as select box and vice versa will happen..

Order 1 has a dropdown in which i am having two options,

      "options": [
        { "key": 'inputbox', "value": 'Show Project Level as input box' },
        { "key": 'dropdown', "value": 'Show Project Level as dropdown' }
      ],

If we choose the first option which has value as Show Project Level as input box, whereas if we choose second option that has value Show Project Level as dropdown..

Based on the above selection, i need to switch the form element accordingly, say user chosen Show Project Level as input box, then i need to display the input box,

    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_level",
      "label": "Project Level as input box",
      "type": "text",
      "value": "",
      "order": 2
    },

Whereas if user chosen Show Project Level as dropdown, then i need to display the dropdown,

    {
      "elementType": "dropdown",
      "key": 'project_level',
      "label": 'Choose Project Level as dropdown',
      "options": [
        { "key": 'low', "value": 'Low' },
        { "key": 'medium', "value": 'Medium' },
        { "key": 'high', "value": 'High' }
      ],
      "order": 2
    }

So the key is going to be unique alone project_level but the form element alone needs to get changed based on the selection of either input box or selectbox..

Kindly help me to change the form element based on the selection on order 1 dropdown..

Result is expected only using pure angular and typescript/javascript way without jquery..

Answer 1

@Undefined, or use two variables "project_level_textbox" and "project_level_dropdown", and make visible or not hte form or make that question.controlType depending the value of the formControl (some like when you're making visible or not a question)

Add a new property "controlTypeAlternative" with "type","field" and "value" and make the

[ngSwitch]="question.controlTypeAlternative?
    form.get(question.controlTypeAlternative.field).value==
 question.controlTypeAlternative.value?
        question.controlTypeAlternative.type:
        question.controlType:question.controlType"

If some complex the operator ? but main that If has the property controlTypeAlternative, check if the value of the form.control is equal. if not use "controlType"