CODEWITHSUNDEEP
angularformsreactiveangular-reactive-formsngx-formly
Vishal Sharma
Vishal Sharma

Reputation: 81

Dynamic Forms in array Angular 9 with help of ngx-formly

Trying to achieve: Dynamic Forms as per user selected locale JSON using ngx-formly/material. How to map fields with my array of objects "this.fields2"?

In my component.ts I have:

model: any = {};
options: FormlyFormOptions = {};
fields: FormlyFeildCongif[];

Fetching the JSON of the selected Locale:
 ngOnInit():void
{
    this.langService.getSelectedLocaleData(this.cuurentLang).subscribe(
    (res) =>
    {
        this.myDynamicForm = res.yBank.fields;
        this.dynamicFormCreate(this.myDynamicForm);
    });
}

public dynamicFormCreate(arr:any)
{
    for(i=0; i< arrr.lenght; i++)
    {
        //here I am fetching data from json and creating an Object structure which is accepted by formly feilds
        //the problem is how do I map this.fields2 array of objects with the formly feilds
        this.fields2.push(
        {
            key: arr[i].type,
            type: arr[i].type,
            templateOptions:
            {
                label: arr[i].label,
                placeHolder: arr[i].placeHolder,
                description: arrp[i].description,
                required: true
            }
        });
    }
}

my component.html

<form [formGroup]="myForm">
    <formly-form
    [model]="model
    [fields]="fields"
    [options]="options"
    [form]="myForm">
    </formly-form>
</form>

Upvotes: 4

Views: 3131

Answers (1)

AsG
AsG

Reputation: 29

If I understand your question correctly then you have a couple of ways to resolve this:

  1. Assign fields2 to fields

    Assuming your, this.fields2 is also a FormlyFieldConfig[], Just assign it to the formly fields in the ngOnInit

    ngOnInit() {
     this.langService.getSelectedLocaleData(this.cuurentLang).subscribe(...);
     this.fields = this.fields2;

  1. Use this.fields inside the dynamicFormCreate method

    Or you can directly update this.fields in your subscribe (instead of using fields2).

public dynamicFormCreate(arr:any)
{
    for(i=0; i< arrr.lenght; i++)
    {
        //here I am fetching data from json and creating an Object structure which is accepted by formly feilds
        //the problem is how do I map this.fields2 array of objects with the formly feilds
        this.fields.push(); // USING fields instead of fields2
    ...
  1. Use a JSON file for the field config and simply generate the model from the service In one of my recent implementation at work, I have the fields definition inside a JSON file, while model comes from a service just like your case. formly library's power comes from this separation, it'll automatically generate the form by applying the model to the form config. I am using repeating sections and my config json is fairly simple, whereas the model gets multiple rows from the backend and formly handles/renders it seemlessly. Hence, unless you have some really complex rendering needs where statically defined config JSON is not feasible, i would recommend option 3.

Upvotes: 2

Related Questions