Question

我正在使用angular 6应用程序，其中我正在使用角度动态格式，并且值来自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。但是，如果我从第一个下拉菜单中选择“将项目级别显示为下拉菜单”，那么我首先需要一个单独的文本框，然后将project_level键更改为选择框，反之亦然。

订单1 有一个下拉菜单，其中我有两个选择，

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

如果我们选择 first 选项，其值为将项目级别显示为输入框，而如果我们选择 second 选项，则其值为将项目级别显示为下拉列表。.

基于以上选择，我需要相应地切换表单元素，例如用户选择了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
    }

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

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

仅使用纯角度和typescript / javascript方式而不使用jquery即可获得预期结果。

Answer 1

@未定义，或使用两个变量“ project_level_textbox”和“ project_level_dropdown”，使可见或不可见的表单，或根据formControl的值使那个question.controlType（类似于在使可见或不成为问题时））

添加具有“类型”，“字段”和“值”的新属性“ controlTypeAlternative”，然后制作

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

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

如何以角度形式将元素更改为输入或下拉？

1 个答案: