Create a form with input controls dynamically from JSON using Angular 2

Question

I need to create a form with controls dynamically from JSON using Angular 2.0.

I'm very new to Angular 2.0 and Typescript. I'm totally clueless, where to start with the development.

Any help is much appreciated.

Below is the sample 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
                            }
                        ]
                    }
                ]
            }
        ]
    }

Answer 1

Create dynamic form group and loop through the json and create respective element, where forms input type and its related attributes(like name, value, placeholder,type,required,pattern etc) were varying as per resource's attributes. So render the forms at run time.

Reference information

Creating forms in angular 2 using json schema at run time

Answer 2

You will need to import a FormBuilder from @angular/forms. Then create a FormGroup.

public form: FormGroup;

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

  _fb.group(obj);

}

On the template you will need loop through the form controls and and create the form based on the type.

This answer may not be give you all the answers you need but it's an eye opener on what you can do.

You may want to use FormArrays depending on how you'd want to implement.

Read through the angular2 documentation on forms. Also watch this video.

Angular 2 Forms | Kara Erickson - YouTube

Forms - ts - GUIDE - Angular