代码之家 › 专栏 › 技术社区 › Maniraj Murugan

使用角形更改形状元素

angular-reactive-forms angular6 typescript angular javascript

Maniraj Murugan · 技术社区 · 6 年前

我正在使用通过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 具有项目名称未更改的文本框。

接下来我们有一个下拉列表 密钥作为项目 ,从这里开始只有需求。

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

同样,如果我选择 Show Project Level 然后 Project Level 只需显示下拉列表, 项目说明 和 Project Members 需要隐藏..

以同样的方式 项目成员 …

那么如何改变 form-elements 基于项目下拉值的选择??

这个 工作实例 因为这里也一样 https://stackblitz.com/edit/angular-x4a5b6-5ys5hf

请帮助我根据所选内容隐藏其他元素项目仅使用角度动态形式的下拉列表。

2 回复 | 直到 6 年前

Eliseo 6 年前

正如@benshabatnoam所说,你唯一需要做的就是改变你的日常形式问题,包括

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

您可以使用类似@benshabatnoam的条件,但我建议您使用更多“可参数化”的条件。

假设您的JSON有一个新的属性“visible”,它是一个具有两个属性(字段和值)的对象。所以,你的元素“project”可以是

{
  "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)因此,如果不将属性“visible”赋予一个字段,则始终显示此字段。

好吧,你必须多做点工作,你必须改变问答基础,才能承认这个新的财产。

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

benshabatnoam 6 年前

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

更改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 *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 .