如何将元素更改为以角度形式输入或下拉？ [英] How to change element to input or dropdown in angular form?

问题描述

我正在制作角度6应用程序，我使用角度动态表单，值来自JSON ..

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

简单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
    }
  ];

要求将仅来自此json ..

Requirement is going to be from this json only..

查看明确的工作示例 https：/ /stackblitz.com/edit/angular-x4a5b6-5ys5hf ，

你可以在初始阶段看到我有输入框和dropdwon ..但是我如果我从第一个下拉列表中选择显示项目级别作为下拉列表，则首先需要单独设置文本框，然后project_level键需要更改为选择框，反之亦然。

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

订单1 有一个下拉列表，其中我有两个选项，

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' }
      ],

如果我们选择第一个选项有v如显示项目级别作为输入框，如果我们选择第二选项，其值显示项目级别为下拉列表 ..

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
    }

所以键将是唯一的 project_level ，但是单独的表单元素需要根据输入框或选择框的选择进行更改。

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

请帮助我根据<$ c上的选择更改表单元素$ c>订单1 下拉..

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

结果只能使用纯角度和打字稿/ javascript方式而不用jquery ..

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

推荐答案

@Undefined，或使用两个变量project_level_textbox和project_level_dropdown，并使可见或不是形式或使问题.controlType取决于formControl的值（有些就像你可见或不是问题一样） ）

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

添加一个带有type，field和value的新属性controlTypeAlternative并制作

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有属性controlTypeAlternative，请检查form.control的值是否相等。如果不使用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"

这篇关于如何将元素更改为以角度形式输入或下拉？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！