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

问题描述

我正在制作 angular 6 应用程序，其中我使用的是 angular 动态形式，并且值来自 JSON..

简单的 JSON:

 jsonData: any = [{"elementType": "下拉菜单","key": '项目',"label": '选择要显示的选项',选项": [{ "key": 'inputbox', "value": '将项目级别显示为输入框' },{ "key": 'dropdown', "value": 'Show Project Level as dropdown' }],订单":1},{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "project_level","label": "项目级别作为输入框","类型": "文本",价值": ""，订单":2},{"elementType": "下拉菜单","key": 'project_level',"label": '选择项目级别作为下拉菜单',选项": [{ "key": 'low', "value": 'Low' },{ "key": 'medium', "value": 'Medium' },{ "key": 'high', "value": 'High' }],订单":2}];

要求仅来自此 json..

看看清晰的工作示例 https://stackblitz.com/edit/angular-x4a5b6-5ys5hf,

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

Order 1 有一个下拉菜单，我有两个选项，

 "选项": [{ "key": 'inputbox', "value": '将项目级别显示为输入框' },{ "key": 'dropdown', "value": 'Show Project Level as dropdown' }],

如果我们选择第一个选项，其值为将项目级别显示为输入框，而如果我们选择第二个选项，其值为将项目级别显示为下拉菜单..

根据上面的选择，我需要相应地切换表单元素，比如用户选择了Show Project Level as input box，然后我需要显示输入框,

<代码> {"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "project_level","label": "项目级别作为输入框","类型": "文本",价值": ""，订单":2},

如果用户选择了Show Project Level as dropdown，那么我需要显示下拉菜单，

<代码> {"elementType": "下拉菜单","key": 'project_level',"label": '选择项目级别作为下拉菜单',选项": [{ "key": 'low', "value": 'Low' },{ "key": 'medium', "value": 'Medium' },{ "key": 'high', "value": 'High' }],订单":2}

所以 key 将是唯一的 project_level 但表单元素本身需要根据输入框或选择框的选择进行更改.>

请帮助我根据 order 1 下拉菜单中的选择更改表单元素..

预期结果仅使用纯 angular 和 typescript/javascript 方式，无需 jquery..

解决方案

@Undefined，或者使用两个变量project_level_textbox"和project_level_dropdown"，并根据formControl(有些像当您使问题可见或不可见时)

添加具有类型"、字段"和值"的新属性controlTypeAlternative"并使

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

如果一些复杂的运算符?但主要是如果有属性 controlTypeAlternative，检查 form.control 的值是否相等.如果不使用控制类型"

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

解决方案

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

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