使用角形式更改表单元素 [英] Change form elements using angular form

问题描述

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

I am making angular dynamic form with form-elements loaded through JSON..

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

The form element generation are working fine, but i am in the need of change of form elements based on options selected from dropdown..

生成表单元素的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，生成元素..

Based on the above JSON, the elements are generated..

在这里你可以看到订单1 有文本框，项目名称没有变化。

Here you can see that Order 1 has textbox with project name which has no changes.

接下来我们有一个键作为项目的下拉列表，从这里只需要开始..

Then in next we have a dropdown with key as project, from here only the requirement starts..

在选项中，如果我选择显示项目描述，然后需要显示项目描述文本框和其他两个 project_level 和 project_members 需要采用隐藏格式..

In options, if i choose Show Project Description, then the Project Description textbox needs to be displayed and other two project_level and project_members needs to be in hidden format..

同样如果我选择显示项目级别然后只需要显示项目级别下拉列表，并且项目描述和项目成员需要隐藏..

Likewise if i choose Show Project Level then the Project Level dropdown alone needs to be displayed and the Project Description and Project Members needs to be in hidden..

以同样的方式项目成员 ..

那么如何更改 form-elements 关于项目博士的选择opdown值??

So how to change the form-elements based on the selection of project dropdown values??

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

请帮助我根据项目下拉列表中的选择隐藏其他元素，仅使用角度动态表单。

Kindly help me to hide the other elements based on the selection from the project dropdown using angular dynamic form alone..

推荐答案

正如@benshabatnoam所说，你唯一需要的就是改变你的恐怖形式问题，包括像

As @benshabatnoam say the only thing you need is change you dinamic-form-question to include some like

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

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

You can use a condition like @Benshabatnoam say, but I suggest you some more "parametrizable"

想象一下，你的json有一个新属性visible，它是一个具有两个属性，字段和值的对象。因此，您的元素project_desc可以像

Imagine your json has a new property "visible" that was an object with two properties, field and value. So, your element "project_desc" can be like

{
  "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"
},

所以dinamic-form-question可以像

So the dinamic-form-question can be like

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

看到我包含条件（！question.visible）所以，如果你不给属性可见到一个字段，此字段始终显示。

See that I include the condition (!question.visible) so, if you don't give the property "visible" to one field, this field is showed always.

嗯，你必须更多地工作，你必须改变question-base.ts来承认这个新属性

Well, you must work some more, you must change question-base.ts to admit this new property

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

这篇关于使用角形式更改表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！