Handling Complex Object with angular-formly

angular-formly
angular-formly is an AngularJS module which has a directive to help customize and render JavaScript/JSON configured forms. The formly-form directive and the formlyConfig service are very powerful and bring unmatched maintainability to your application's forms. For more information visit its GitHub page.

Now when you use formly, it actually provide very basic framework for generating forms. But it provide a great extensibility as well. So, here I am going to use that extensibility.

Scenario
In many practical scenarios, objects are complex, i.e. they have properties which are not of basic type, but are objects itself. For example consider the following JSON object

{
  "address": {
    "street": "",
    "city": "",
    "state": ""
  },
  "name": ""
}

The name is of simple type, but address is itself an another object. Now issue is with formly we  can easily generate form for this except the address field.

Solution
The idea is to use the formly recursively to generate the form for the nested object. For this I have created a custom type in the formly-template for the template of complex object, as:

 formlyConfigProvider.setType({
        name: 'form',
        template: '<formly-form fields="to.formFields" model="model[options.key]" name="{{options.key}}">});

Here, the template is again using the formly directive to generate the form for the nested object. Now with the new type we can define configuration for formly as:

var addressFormFields = [
 {
  key: 'street',
  type: 'text',
  templateOptions: {
   label: 'Street',
   placeholder: 'Enter street',
   required: true
  }
 },
 {
  key: 'city',
  type: 'text',
  templateOptions: {
   label: 'City',
   placeholder: 'Enter city',
   required: true
  }
 },
 {
  key: 'state',
  type: 'text',
  templateOptions: {
   label: 'State',
   placeholder: 'Enter state',
   required: true
  }
 }
];


$scope.formFields = [
 {
  key: 'name',
  type: 'text',
  templateOptions: {
   label: 'Name',
   placeholder: 'Enter name',
   required: true
  }
 },
 {
  key: 'address',
  type: 'form',
  templateOptions: {
   label: 'Address',
   formFields: addressFormFields
  }
 }
];

addressFormFields define the form-field for nested address form, and formFields define the outer form. Note that the type for address is form, this type will be used by formly for mapping to the template we have defined in the formly-template.The generated form will look like: