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

Posted 2023-03-13

【中文标题】如何将元素更改为角度形式的输入或下拉菜单？

【英文标题】：How to change element to input or dropdown in angular form?

【发布时间】：2019-05-06 16:11:24

【问题描述】：

我正在制作 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 键需要更改为选择框，反之亦然..

订单 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，那么我需要显示输入框，

    
      "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 但表单元素需要根据输入框或选择框的选择进行更改..

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

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

【问题讨论】：

在下拉列表中添加更改事件监听器。

@SumeshTG，如果你将它作为工作 stackblitz 的答案发布会很好，因为我是角度和动态形式的新手。从 JSON 生成动态形式时，除了切换元素之外，它做了所有事情我面临问题..

共享堆栈闪电战是你的榜样吗？还是你也想要这样？

@PrashantPimpale，这是我尝试过的。你可以在初始阶段看到我同时拥有输入框和 dropdwon 。但如果我选择@，我首先需要单独拥有文本框987654329@ 从第一个下拉列表中，然后 project_level 键需要更改为选择框，反之亦然。这是我制作的示例，我需要根据订单 1 选择切换元素..

我不确定您将如何处理 UI 更改请求！例如：如果我想为文本框背景添加颜色，那么

【参考方案1】：

@Undefined，或者使用两个变量“project_level_textbox”和“project_level_dropdown”，使表单可见或不可见，或者根据formControl的值设置question.controlType（有些像当你使问题可见或不可见时)

添加一个带有“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”

【讨论】：

Eliseo，请提供工作示例。因为你帮了我很多，我希望你能像其他使用 stackblitz 的人一样让这个解决方案对我来说不太清楚......

不能用和project_level一样的key改吗？？

stackblitz.com/edit/…