javascript - 如何将元素更改为 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 as dropdown，我首先需要单独的文本框，然后 project_level 键需要更改为选择框，反之亦然..

订单 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 input box，那么我需要显示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，那么我需要显示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 中是唯一的，但是表单元素需要根据输入框或选择框的选择进行更改..

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

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

Answer 1

@Undefined，或使用两个变量“project_level_textbox”和“project_level_dropdown”，并根据 formControl 的值使表单可见或不可见或使该 question.controlType 取决于 formControl 的值(有些像当你使可见或不可见时的问题)

添加一个带有“类型”、“字段”和“值”的新属性“controlTypeAlternative”并制作

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

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