使用角度形式将元素值作为 JSON 格式 [英] Form element values as JSON using angular form

问题描述

我正在使用 Angular 动态表单

这里我做了一个嵌套的输入字段，其中在初始阶段会有两个输入文本框，点击添加按钮后，接下来的两个输入框将在每次点击添加按钮时附加.

Here i have made a nested input fields in which there will be two input textboxes at the initial stage and on click the add button the next two input boxes will get append on each click on add button.

这里一切正常..

这里我使用了 question-service.ts 中的值作为，

Here i have used the values in question-service.ts as,

  new TextboxQuestion({
  elementType: "textbox",
  class: "col-12 col-md-4 col-sm-12",
  key: "project_name",
  label: "Project Name",
  type: "text",
  value: '',
  required: true,
  order: 1
  }),

  new TextboxQuestion({
  elementType: "textbox",
  class: "col-12 col-md-4 col-sm-12",
  key: "project_desc",
  label: "Project Description",
  type: "text",
  value: '',
  required: true,
  order: 2
  }),
  new ArrayQuestion({
    key: 'myArray',
    value: '',
    order: 3,
    children: [
      new TextboxQuestion({
      elementType: "textbox",
      class: "col-12 col-md-4 col-sm-12",
      key: "property_one",
      label: "Property One",
      type: "text",
      value: '',
      required: true,
      order: 3
      }),
      new TextboxQuestion({
      elementType: "textbox",
      class: "col-12 col-md-4 col-sm-12",
      key: "property_two",
      label: "Property Two",
      type: "text",
      value: '' ,
      required: true,
      order: 4
      })
    ]
  })

我需要更改，就像每个喜欢的数据都应该来自 json，

Which i need to change like the data should be from json for each like,

  jsonData: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": true,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    },
    {
      "elementType": "array",
      "key": "myArray",
      "value": "",
      "order": "3",
      "children": [
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_one",
          "label": "Property One",
          "type": "text",
          "value": "",
          "required": true,
          "order": 3
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_two",
          "label": "Property Two",
          "type": "text",
          "value": "",
          "required": true,
          "order": 4
        }
      ]
    }
  ];

Stackblitz 没有 JSON:

Stackblitz without JSON:

https://stackblitz.com/edit/angular-x4a5b6-xcychx

Stackblitz 使用 JSON:

Stackblitz with JSON:

https://stackblitz.com/edit/angular-x4a5b6-u6ecpk

加载 JSON 时需要发生在没有 json 的 stacblitz 链接中发生的相同场景..

The same scenario which happens in stacblitz link without json needs to happen while loading JSON..

我在 getQuestions() 中给出了以下内容，

I have given the following inside getQuestions() like,

 getQuestions() {

    console.log(this.jsonData);

    let questions: any = [];

    this.jsonData.forEach(element => {
      if (element.elementType === 'textbox') {
        questions.push(new TextboxQuestion(element));
      } else if (element.elementType === 'array') {
        questions.push(new ArrayQuestion(element));
      }
    });

    return questions.sort((a, b) => a.order - b.order);
  }
}

对于普通文本框，它可以工作，但对于孩子来说，它在点击添加按钮时不起作用(文本框没有显示)，子文本框没有被添加.

For normal textbox its working but whereas for the children its not working on clicking add button (textboxes were not displayed), the child textboxes not getting added.

请帮助我实现与 link 1 中发生的相同的结果也需要在 link 2 中使用 JSON 时发生.. 并且请不要包含任何第三方一切内部的库都以核心角度运行.

Kindly help me to achieve the same result that happens in link 1 also needs to happen while using JSON in link 2 .. And also kindly dont include any third party libraries inside everything is going in core angular.

推荐答案

@Many，当你有类型数组时，你必须在推送数组之前创建孩子.

@Many, when you have type array, you must create the children before push the array.

...
} else if (element.elementType === 'array') {
    let children:any[]=[]; //declare children
    //each children of element fill our array children
    element.children.forEach(e=>{
       if (e.elementType === 'textbox') {
         children.push(new TextboxQuestion(e));
       }
    })
    //Hacemos un push not of element else element + the property children
    //changed (it will be the array created)
    questions.push(new ArrayQuestion({...element,children:children}));
}

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