Creating dynamic forms from api response in angular7

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"
                        }
                    ]
                }
            ]
        }
    }
]
}

Are you sure you don't get any errors in the console and that the created inputs are disabled in DOM ? Forms do not become disabled without explicitly saying so, could you provide your example with some mocked http response ? — Maksym
– Maksym, Commented Apr 22, 2019 at 13:11
@MaksymCierzniak No I haven't explicitly disabled it. Also getting an error in console: ERROR TypeError: Cannot read property 'findIndex' of undefined — Akhil Sundar
– Akhil Sundar, Commented Apr 22, 2019 at 13:54
So it looks like your form doesn't get fully rendered properly and you have some error which you have to find. If you could post this part of your code to stackblitz I would be able to take a look. if you don't, you should get the link to the part of the code which is broken in the error message. — Maksym
– Maksym, Commented Apr 22, 2019 at 14:01
You're calling to your function getFields(tab) BEFORE you has the data in apiService. So, put an if to avoid this and call to the function in subscribe. But it would be good that you understand the code you copy. The code is a component that has an @Input-the fields- and an @Output (if your component has a (onSubmit)="yourFunciton($event)" you can get the values. The part of this.form = new FormGroup({...fields: new formControl(JSON.stringify(this.fields))}); you can remove because has no function — Eliseo
– Eliseo, Commented Apr 22, 2019 at 15:24

Eliseo · Accepted Answer · 2019-04-23 08:36:48Z

3

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

answered Apr 23, 2019 at 8:36

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akhil Sundar Over a year ago

That worked, I had to change the code a bit to accomodate my apiService . Thanks for your help.

Collectives™ on Stack Overflow

Creating dynamic forms from api response in angular7

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest