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

问题描述

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

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

生成表单元素的 JSON

 jsonData: any = [{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "project_name","label": "项目名称","类型": "文本",价值": ""，必需":假，最小长度":3，最大长度":20，订单":1},{"elementType": "下拉菜单","key": '项目',"label": '选择要显示的选项',选项": [{ "key": 'description', "value": '显示项目描述' },{ "key": 'level', "value": '显示项目级别' },{ "key": 'members', "value": '显示项目成员' }],订单":2},{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "project_desc","label": "项目描述","类型": "文本",价值": ""，订单":3},{"elementType": "下拉菜单","key": 'project_level',"label": '选择项目级别',选项": [{ "key": 'low', "value": 'Low' },{ "key": 'medium', "value": 'Medium' },{ "key": 'high', "value": 'High' }],订单":4},{"elementType": "下拉菜单","key": 'project_members',"label": '选择项目成员',选项": [{ "key": 'developer', "value": 'Developer' },{ "key": 'leader', "value": 'leader' },{键":经理"，价值":经理"}],订单":5}];

基于上述JSON，生成元素..

在这里你可以看到 Order 1 有项目名称的文本框，没有变化.

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

在选项中，如果我选择Show Project Description，则需要显示Project Description文本框，另外两个project_level和>project_members 需要采用隐藏格式..

同样，如果我选择 Show Project Level，则需要单独显示 Project Level 下拉列表，Project Description 和 Project成员需要隐藏..

对于项目成员..

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

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

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

解决方案

正如@benshabatnoam 所说，你唯一需要做的就是改变你的 dinamic-form-question 以包含一些类似的内容

您可以使用@Benshabatnoam 之类的条件，但我建议您使用更多可参数化"的条件

假设您的 json 有一个新属性visible"，它是一个具有两个属性、字段和值的对象.所以，你的元素project_desc"可以像

<代码>{"elementType": "文本框","class": "col-12 col-md-4 col-sm-12","key": "project_desc","label": "项目描述","类型": "文本",价值": ""，订单":3，"visible":{"field":"project","value":'description'}//<--添加这个属性"},

所以 dinamic-form-question 可以是这样的

...

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

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

导出类 QuestionBase{值:T；...可见:任何；//<--ad 这个属性构造函数(选项:{价值?:T，...可见?:任何，//在构造函数中也包括可见"..}){this.value = options.value;...this.visible = options.visible;}

你可以看到你的分叉的stackblitz

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 that generates form-elements

  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
    }
  ];

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

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..

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..

In the same way for Project Members..

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

The working example for the same was here 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..

解决方案

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

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

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

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

So the dinamic-form-question can be like

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

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.

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;
  }

You can see your forked stackblitz

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