2

我需要使用 Angular 2.0 从 JSON 动态创建一个带有控件的表单。

我对 Angular 2.0 和 Typescript 很陌生。我完全不知道从哪里开始开发。

任何帮助深表感谢。

下面是示例 JSON

"General": {
        "None": [
            {
                "FieldName": "100",
                "DisplayName": "Mapping Name",
                "ClassSize": "col-sm-6 col-xs-12",
                "Field": [
                    {
                        "ControlType": "TextBox",
                        "FieldClass": "col-sm-6 col-xs-12",
                        "Required": "True",
                        "MaxLength": "10",
                        "RegularExpression": ""
                    }
                ]
            },
            {
                "FieldName": "101",
                "DisplayName": "Select Target File Type",
                "ClassSize": "col-sm-6 col-xs-12",
                "Field": [
                    {
                        "ControlType": "Dropdown",
                        "FieldClass": "col-sm-6 col-xs-12",
                        "Required": "True",
                        "Options": [
                            {
                                "Description": "--Please select--",
                                "ID": 0
                            },
                            {
                                "Description": "Row Per Day",
                                "ID": 1
                            },
                            {
                                "Description": "Row Per Week",
                                "ID": 2
                            },
                            {
                                "Description": "Row Per Transaction",
                                "ID": 3
                            }
                        ]
                    }
                ]
            }
        ]
    }
4

2 回答 2

1

创建动态表单组并循环遍历 json 并创建相应的元素，其中表单输入类型及其相关属性（如名称、值、占位符、类型、必需、模式等）根据资源的属性而有所不同。所以在运行时渲染表单。

参考信息

在运行时使用 json 模式在 Angular 2 中创建表单

于 2018-05-24T09:56:22.913 回答
0

您将需要从 @angular/forms 导入 FormBuilder。然后创建一个 FormGroup。

public form: FormGroup;

private _buildForm() {
  let obj = {};
  General['None'].forEach(val => {
    obj[val.fieldname] = new FormControl('', Validators.required);
  });

  _fb.group(obj);

}

在模板上，您将需要遍历表单控件并根据类型创建表单。

这个答案可能不会给你所有你需要的答案，但它会让你大开眼界。

您可能想要使用 FormArrays，具体取决于您想要实现的方式。

阅读有关表单的 angular2 文档。另请观看此视频。

Angular 2 形式 | 卡拉·埃里克森 - YouTube

表单 - ts - 指南 - Angular

于 2016-11-30T21:06:41.090 回答