如何将元素更改为 angular 形式的输入或下拉？

Question

我正在制作 angular 6 应用程序，其中我使用 angular 动态表单并且值来自 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..

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

你可以看到在初始阶段我有输入框和dropdwon..但是如果我从第一个下拉列表中选择 Show Project Level 作为下拉列表，那么我首先需要单独的文本框，然后 project_level 键需要更改，因为 select 框，反之亦然..

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

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

如果我们选择 first 选项，其值为 Show Project Level as input box，而如果我们选择 second 选项具有值 Show Project Level as dropdown..

基于上述selection，我需要相应地切换表单元素，假设用户选择Show Project Level as 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
    },

而如果用户选择 Show Project Level as 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
    }

所以 key 将是唯一的 project_level 但表单元素本身需要根据输入框或 selectbox 的 selection..

请帮助我根据 order 1 下拉列表中的 selection 更改表单元素..

预期结果仅使用纯 angular 和 typescript/javascript 方式而没有 jquery..

Answer 1

@Undefined，或者使用两个变量 "project_level_textbox" 和 "project_level_dropdown"，并根据 formControl 的值使表单可见或不可见或使 question.controlType 取决于 formControl 的值（有些像当你使可见或不可见的问题）

用 "type"、"field" 和 "value" 添加新的属性 "controlTypeAlternative" 并制作

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

如果运算符有些复杂？但主要是如果有属性 controlTypeAlternative，检查 form.control 的值是否相等。如果不使用 "controlType"

如何将元素更改为 angular 形式的输入或下拉？

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

javascript

typescript

angular

angular-reactive-forms

angular6