首页 文章

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

提问于
浏览
0

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

我查看了动态表单https://angular.io/guide/dynamic-form的角度文档但是在这里我看到它们将每个类对象传递给来自父级的dynamic-form-question.component.ts dynamic-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,就像官方网站上的例子一样。 (截至目前,输入元素仅属于一种类型.)。

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

1 回答

  • 0

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

    这是我的模板:

    <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 和数据绑定,而不是你想要的所有东西都在这里,但你可以做一些更改,以获得更多的值宾语。我希望这有帮助

相关问题