使用角度形式更改表单元素

Posted 2023-03-13

【中文标题】使用角度形式更改表单元素

【英文标题】：Change form elements using angular form

【发布时间】：2019-05-05 13:39:21

【问题描述】：

我正在使用通过 JSON 加载的表单元素制作角度动态表单..

表单元素生成工作正常，但我需要根据从下拉列表中选择的选项更改表单元素..

生成表单元素的 JSON

  jsonData: any = [
    
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    ,
    
      "elementType": "dropdown",
      "key": 'project',
      "label": 'Choose option to display',
      "options": [
         "key": 'description', "value": 'Show Project Description' ,
         "key": 'level', "value": 'Show Project Level' ,
         "key": 'members', "value": 'Show Project Members' 
      ],
      "order": 2
    ,
    
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "order": 3
    ,
    
      "elementType": "dropdown",
      "key": 'project_level',
      "label": 'Choose Project Level',
      "options": [
         "key": 'low', "value": 'Low' ,
         "key": 'medium', "value": 'Medium' ,
         "key": 'high', "value": 'High' 
      ],
      "order": 4
    ,
    
      "elementType": "dropdown",
      "key": 'project_members',
      "label": 'Choose Project Member',
      "options": [
         "key": 'developer', "value": 'Developer' ,
         "key": 'leader', "value": 'Leader' ,
         "key": 'manager', "value": 'Manager' 
      ],
      "order": 5
    
  ];

基于上面的JSON，生成元素..

在这里您可以看到Order 1 的文本框的项目名称没有任何变化。

然后在接下来我们有一个带有key as project的下拉菜单，从这里开始只有需求..

在选项中，如果我选择Show Project Description，则需要显示Project Description 文本框，而其他两个project_level 和project_members 需要隐藏格式..

同样，如果我选择Show Project Level，则仅需要显示Project Level 下拉列表，而Project Description 和Project Members 需要隐藏。..

Project Members.. 也一样

那么如何根据项目下拉值的选择来改变form-elements呢？？

工作示例在这里https://stackblitz.com/edit/angular-x4a5b6-5ys5hf

请帮助我根据 project 下拉列表中的选择隐藏其他元素，仅使用角度动态形式..

【参考方案1】：

正如@benshabatnoam 所说，您唯一需要做的就是改变您的动态形式问题以包含一些类似的内容

<div [formGroup]="form" *ngIf="?????">

你可以使用像@Benshabatnoam 这样的条件，但我建议你更“参数化”

想象一下，您的 json 有一个新属性“可见”，它是一个具有两个属性（字段和值）的对象。所以，你的元素“project_desc”可以像

  "elementType": "textbox",
  "class": "col-12 col-md-4 col-sm-12",
  "key": "project_desc",
  "label": "Project Description",
  "type": "text",
  "value": "",
  "order": 3,
  "visible":"field":"project","value":'description' //<--add this "property"
,

所以动态形式问题可以像

<div [formGroup]="form" 
   *ngIf="!question.visible || 
   form.get(question.visible.field).value==question.visible.value">
...
</div>

请注意我包含了条件 (!question.visible)，因此，如果您不将属性“可见”赋予某个字段，则始终显示该字段。

好吧，你必须多做一些工作，你必须更改 question-base.ts 以承认这个新属性

export class QuestionBase<T> 
  value: T;
  ...
  visible:any; //<--ad this property


  constructor(options: 
    value?: T,
    ...
    visible?:any, //In constructor include "visible" too
    ..
  )
    this.value = options.value;
    ...
    this.visible = options.visible;
  

你可以看到你的forked stackblitz

【讨论】：

Eliseo，在您的 stacblitz 中，我可以看到两个输入框始终显示..但我只需要在选择时显示一个..

对不起，现在要求已更改，所以我发布了新问题***.com/questions/53626407/…，我需要根据下拉菜单切换表单元素，它可以是输入框或同一个键的下拉菜单..

关于你的问题，只需要添加属性“visible”:"field":"project","value":'level', and "visible":"field":" project","value":'members'，在你的 json 到 "questions" 4 和 5

无法获取您..由于要求已更改，我希望此 ***.com/questions/53626407/… 的输出相同，我希望您能提供更好的解决方案..这里我们隐藏了元素，而我需要根据订单 1 下拉选择在文本框或下拉列表之间切换..希望你有这个问题..如果没有我可以清除你..我很抱歉，请帮我切换表单元素..

【参考方案2】：

您需要对代码进行一些更改。

更改 json 以便选项键与控制键匹配。

... "elementType": "dropdown", "key": 'project', "label": 'Choose option to display', "options": [ "key": 'project_desc', "value": 'Show Project Description' , "key": 'project_level', "value": 'Show Project Level' , "key": 'project_members', "value": 'Show Project Members' ], "order": 2 , "elementType": "textbox", "class": "col-12 col-md-4 col-sm-12", "key": "project_desc", "label": "Project Description", "type": "text", "value": "", "order": 3 , ...

在您的表单中添加一个 *ngIf 到 app-question 组件，该组件将执行一个向其传递问题的函数，该函数将保存隐藏给定问题的逻辑。

<app-question *ngIf="isShowQuestion(question)" [question]="question" [form]="form"> </app-question>

函数逻辑将检查问题是否是您要隐藏的控件之一，如果是，它将检查下拉“显示选项”的值是否匹配，如果匹配，它将显示问题，否则它将隐藏问题。

isShowQuestion(question: QuestionBase<any>): boolean // If one of the controls you want to hide if (question.key === 'project_desc' || question.key === 'project_level' || question.key === 'project_members') // if the option to display have value and it is this question that show it else don't show it return !this.form.controls['project'].value || this.form.controls['project'].value === question.key; else // if not, always display return true;

我已经分叉了你的 stackblitz 项目，所以你可以看到它在运行here。