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

Question

I have created a component to create dynamic forms using angular reactive forms. When I try to use the component to create form fields in another component depending on the response from my API. The created form becomes disabled for me, I am not able to edit the form in my browser. I have used this as a reference for creating the form. But here they have hardcoded the fields , in my case I use an API call to get the fields as JSON.

My TS Code:

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);
      });
  }

My HTML:

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

API Response:

{
"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

Akhil. The code you put is, as I yet say you, a component with a input and an output. In this stackblitz I change the "philosophy" to create a component that manage "FormsControl"

The diference it's that, now you create the FormGroup in the appComponent, not in dynamic-form-builder. It's the reason because the "submit" is now belong to app-component. The other difference it's that the "atoms" get as @Input a FormControl -except the list of check boxes- and has no reference to a form. It's not necesary.

Using this aproach you can create the whole formGroup at first. Remember that a FormGroup exists and is independent of ig we has inputs or not. Then you can create a different "tabs" or "whatever" acording to your file.

In the stackblitz, I divided the original list in two group and I make a simple <div *ngFor>

I hope this help you