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..

@SumeshTG, It would be good if you post it as answer with working stackblitz because i am new in angular and dynamic form.. As of generation of dynamic form from JSON it did everything but switching the elements i am facing issues.. — Maniraj Murugan
– Maniraj Murugan, Commented Dec 5, 2018 at 6:44
Is that shared stackblitz your example? or do you want same like that? — Prashant Pimpale
– Prashant Pimpale, Commented Dec 5, 2018 at 6:52
@PrashantPimpale, It is what i have tried.. 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.. It was the example made by me and i need to switch the elements based on order 1 selection.. — Maniraj Murugan
– Maniraj Murugan, Commented Dec 5, 2018 at 6:56
I am not sure how you are going to handle in case of a change request of UI! For ex: If I want to add color for textbox background, then — Prashant Pimpale
– Prashant Pimpale, Commented Dec 5, 2018 at 7:04

Eliseo · Accepted Answer · 2018-12-05 08:02:32Z

2

@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"

answered Dec 5, 2018 at 8:02

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Maniraj Murugan Over a year ago

Eliseo, Kindly please provide working example.. As because you helped me a lot, I hope you will make this solution little clear for me as like others with stackblitz..

Maniraj Murugan Over a year ago

Is it not possible to change with the same key as project_level??

Eliseo Over a year ago

stackblitz.com/edit/…

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related