Question

我从服务器获取JSON响应，我从中获取构建FormGroup对象所需的元数据。由于JSON是动态的，FormGroup对象也是如此，如何解析HTML中的JSON字段？

我查看了动态表单https://angular.io/guide/dynamic-form的角度文档但是在这里我看到他们将每个类对象传递给来自父 dynamic-form-question.component.ts >动态form.component.ts

我的JSON：

[
  {
    "key": "Basic",
    "required": false,
    "controlType": "section",
    "children": [
        {
            "key": "net1",
            "required": false,
            "controlType": "dropdown"
        },
        {
            "default": "",
            "key": "net2",
            "required": true,
            "controlType": "textbox"
        }
    ]
  },
  {
    "key": "Advanced",
    "required": false,
    "controlType": "section",
    "children": [
        {
            "key": "Area1",
            "required": false,
            "controlType": "sub-section",
            "children": [
                {
                    "default": "test",
                    "key": "key1",
                    "required": false,
                    "controlType": "dropdown",
                    "choices" : [ "test",
                                  "test1",
                                  "test2"
                                ]
                },
                {
                    "default": "pass",
                    "key": "key2",
                    "required": false,
                    "controlType": "textbox"
                }
            ]
        },
        {
            "key": "Area2",
            "required": false,
            "controlType": "sub-section",
            "children": [
                {
                    "default": false,
                    "key": "key3",
                    "required": false,
                    "controlType": "radiobutton"
                }
            ]
        }
    ]
  }
]

对应的FormGroup对象是：

form = this.fb.group({
  Basic: this.fb.group ({
    net1: '',
    net2: ''
  }),
  Advanced: this.fb.group ({
    Area1: this.fb.group ({ 
      key1: 'test',
      key2: 'pass'
    }),
    Area2: this.fb.group ({
      key3: ''
  })
})

在HTML中，我需要从控制类型的JSON中获取字段，以决定输入元素的类型以及下拉列表中的选项。

什么是在打字稿中解析JSON以便将其传递给HTML的理想方法？

基本上我想要子对象，例如

{
    "key": "net1",
    "required": false,
    "controlType": "dropdown"
}

与相应的formGroup对象一起传递给JSON。

我的HTML看起来像：

<div>
  <form (ngSubmit)="onSubmit()" [formGroup]="form">
    <div formGroupName="Basic">
      <ng-container *ngFor="let controlName of controls('Basic.children')" formGroupName="children">
        <input type="textbox" [formControlName]="controlName"><br>
      </ng-container>
    </div>

    <div formGroupName="Advanced">
      <div *ngFor="let groupName of controls('Advanced')" [formGroupName]="groupName">
        <ng-container *ngFor="let controlName of controls('Advanced.' + groupName)">
          <input type="textbox" [formControlName]="controlName"><br>
        </ng-container>
      </div>
    </div>

    <div class="form-row">
      <button type="submit" [disabled]="!form.valid">Save</button>
    </div>
  </form>
</div>

这样我就可以在controlType上应用ngSwitch，就像官方网站上的例子一样。（截至目前，输入元素仅属于一种类型。）。

有人可以帮我解决这个问题吗？

Answer 1

我刚刚做了一个解决方案，它可能有一些问题，而且它不是那么有活力，但它仍然可以帮助

这是我的模板：

<form novalidate >
    <div *ngFor="let input of inputs">
        <input [type]="input">
    </div>
</form>

我完全复制了你的JSON示例并用它来建模我的解决方案

这是component.ts

export class HomeComponent implements OnInit {

  inputs: Array<String> = [];

  jsonExample: Object;


  constructor() { 


  }

  ngOnInit() {

this.jsonExample = 
[
  {
    "key": "Basic",
    "required": false,
    "controlType": "section",
    "children": [
        {
            "key": "net1",
            "required": false,
            "controlType": "dropdown"
        },
        {
            "default": "",
            "key": "net2",
            "required": true,
            "controlType": "textbox"
        }
    ]
  },
  {
    "key": "Advanced",
    "required": false,
    "controlType": "section",
    "children": [
        {
            "key": "Area1",
            "required": false,
            "controlType": "sub-section",
            "children": [
                {
                    "default": "test",
                    "key": "key1",
                    "required": false,
                    "controlType": "dropdown",
                    "choices" : [ "test",
                                  "test1",
                                  "test2"
                                ]
                },
                {
                    "default": "pass",
                    "key": "key2",
                    "required": false,
                    "controlType": "textbox"
                }
            ]
        },
        {
            "key": "Area2",
            "required": false,
            "controlType": "sub-section",
            "children": [
                {
                    "default": false,
                    "key": "key3",
                    "required": false,
                    "controlType": "radiobutton"
                }
            ]
        }
    ]
  }
];

this.parseJSON();



}

  parseJSON() {

    Object.keys(this.jsonExample).forEach(key => {
      Object.keys(this.jsonExample[key]['children']).forEach(key2 => {
        if (this.jsonExample[key]['children'][key2]['controlType'] ===  'sub-section') {
          Object.keys(this.jsonExample[key]['children'][key2]['children']).forEach(key3 => {
            this.inputs.push(this.jsonExample[key]['children'][key2]['children'][key3]['controlType']);
          });
        }
        else {
          this.inputs.push(this.jsonExample[key]['children'][key2]['controlType']);
        }
      });
    });

  }

}

所以基本上我正在检查每个controlType键，然后将它的值添加到一个数组，然后使用* ngFor和数据绑定，而不是你想要的所有东西都在这里，但你可以做一些更改以获得更多的值走出了对象。我希望这有帮助

如何解析要提供给formcontrol的JSON值？

1 个答案: