从 angular7 中的 api 响应创建动态表单

Question

我创建了一个组件来使用 angular 响应式表单创建动态表单。当我尝试使用该组件根据我 API 的响应在另一个组件中创建表单字段时。创建的表单对我禁用，我无法在浏览器中编辑表单。我使用 this 作为创建表单的参考。但是这里他们对字段进行了硬编码，在我的例子中，我使用 API 调用来获取字段作为 JSON.

我的 TS 代码：

getFields(tab) {
    this.fields = [];
    const itemIndex = this.dynamicFields.findIndex(item => 
    item.tab_name === tab);
    this.dynamicFields[itemIndex].extra_fields[tab].forEach(value => {
    this.fields.push(
        {
            type: value.type,
            name: value.name,
            label: value.name,
            value: '',
            required: value.required,
         }
       )
     });

    this.form = new FormGroup({
      fields: new FormControl(JSON.stringify(this.fields))
    });
    return this.fields;

  }


getDynamicFields() {

    this.apiService.get('dynamic-fields/').subscribe(
      data => {
        this.dynamicFields = data.results;

      },
      error => {
        console.log(error);
      });
  }

我的HTML:

<ng-template ngbTabContent>
    <dynamic-form-builder [fields]="getFields('health')"></dynamic-form-builder>
</ng-template>

API 响应：

{
"totalElements": 3,
"totalPages": 1,
"results": [
    {
        "id": 1,
        "created": "2019-04-09T06:52:50.776000Z",
        "updated": "2019-04-09T08:54:44.664000Z",
        "tab_name": "passport",
        "extra_fields": {
            "passport": [
                {
                    "name": "name",
                    "type": "text",
                    "label": "Name on Passport",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "passportNo",
                    "type": "text",
                    "label": "Passport No",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "dateOfIssue",
                    "type": "date",
                    "label": "Date of Issue",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "dateOfExpiry",
                    "type": "date",
                    "label": "Date of Expiry",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "placeOfIsse",
                    "type": "text",
                    "label": "Place of issue",
                    "value": "",
                    "required": "true"
                }
            ]
        },
        "general_fields": null
    },
    {
        "id": 2,
        "created": "2019-04-09T07:44:12.113000Z",
        "updated": "2019-04-09T07:44:12.113000Z",
        "tab_name": "bank",
        "extra_fields": {
            "bank": [
                {
                    "name": "name",
                    "type": "text",
                    "label": "Bank Name",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "accountName",
                    "type": "text",
                    "label": " Name of the account Holder",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "accountNo",
                    "type": "text",
                    "label": "Account No",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "accountType",
                    "type": "text",
                    "label": "Account Type",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "code",
                    "type": "text",
                    "label": "IFSC/SWIFT Code",
                    "value": "",
                    "required": "true"
                }
            ]
        },
        "general_fields": null
    },
    {
        "id": 3,
        "created": "2019-04-09T07:45:25.721000Z",
        "updated": "2019-04-22T07:21:53.389265Z",
        "tab_name": "health",
        "extra_fields": {
            "health": [
                {
                    "name": "Blood Group123",
                    "type": "text",
                    "required": "true"
                },
                {
                    "name": "Height",
                    "type": "text",
                    "required": "true"
                },
                {
                    "name": "Weight",
                    "type": "text",
                    "required": true
                },
                {
                    "name": "dsafsa",
                    "type": "text",
                    "required": ""
                }
            ]
        },
        "general_fields": {
            "health": [
                {
                    "group": [
                        {
                            "name": "label",
                            "type": "text",
                            "value": "Blood Group"
                        },
                        {
                            "name": "type",
                            "type": "text",
                            "value": "text"
                        },
                        {
                            "name": "required",
                            "type": "checkbox",
                            "value": "true"
                        }
                    ]
                }
            ]
        }
    }
]
}

Answer 1

阿基尔。正如我所说，您输入的代码是一个具有输入和输出的组件。在 this stackblitz 中，我更改 "philosophy" 以创建管理 "FormsControl"

的组件

不同之处在于，现在您在 appComponent 中创建 FormGroup，而不是在 dynamic-form-builder 中。这是因为 "submit" 现在属于 app-component。另一个区别是 "atoms" 得到的是 @Input 一个 FormControl - 除了复选框列表 - 并且没有对表单的引用。没必要。

使用这种方法，您可以首先创建整个 formGroup。请记住，FormGroup 存在并且独立于我们是否有输入。然后您可以根据您的文件创建不同的 "tabs" 或 "whatever"。

在 stackblitz 中，我将原始列表分为两组，并制作了一个简单的 <div *ngFor>

希望对你有所帮助

从 angular7 中的 api 响应创建动态表单

Creating dynamic forms from api response in angular7

angular

angular-reactive-forms

angular7