使用角度形式将元素值作为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

使用 JSON的Stackblitz:

Stackblitz with JSON:

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

加载JSON时，需要在stacblitz链接中发生而没有json的情况相同.

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.

请帮助我获得与链接1 相同的结果在链接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, 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屋！