angular-formly: Repeating Sections

This is a template for angular-formly which adds repeating sections. This is all pretty much just packaged up from formly-repeating-section and influenced by the package design of angular-formly-templates-bootstrap.

Dependencies

• Required to use these templates:
  • angular
  • angular-formly

Install in your project

• Install angular-formly

• Install angular-formly: Bootstrap Templates $ bower install angular-formly angular-formly-repeating-section --save

  or

  $ npm install angular-formly angular-formly-repeating-section --save

• Include the javascript file in your index.html, Formly comes in the following flavors: <script src="https://github.com/markacola/angular-formly-repeating-section/raw/master/bower_components/angular-formly/dist/formly.min.js"></script> <script src="https://github.com/markacola/angular-formly-repeating-section/raw/master/bower_components/angular-formly-templates-bootstrap/dist/angular-formly-repeating-section.min.js"></script>

  and

  angular.module('yourModule', ['formly', 'formlyRepeatingSection']);

  or

  angular.module('yourModule', [require('angular-formly'), require('angular-formly-repeating-section')]);

Documentation

See angular-formly for formly core documentation.

Use as follows:

[
  {
    "type": "repeatSection",
    "key": "investments",
    "templateOptions": {
      "btnText": "Add another investment",
      "fields": [
        {
          "className": "row",
          "fieldGroup": [
            {
              "className": "col-xs-4",
              "type": "input",
              "key": "investmentName",
              "templateOptions": {
                "label": "Name of Investment:",
                "required": true
              }
            },
            {
              "type": "input",
              "key": "investmentDate",
              "className": "col-xs-4",
              "templateOptions": {
                "label": "Date of Investment:",
                "placeholder": "dd/mm/yyyy such as 20/05/2015",
                "dateFormat": "DD, d  MM, yy"
              }
            },
            {
              "type": "input",
              "key": "stockIdentifier",
              "className": "col-xs-4",
              "templateOptions": {
                "label": "Stock Identifier:"
              }
            }
          ]
        },
        {
          "type": "radio",
          "key": "type",
          "templateOptions": {
            "options": [
              {
                "name": "Text Field",
                "value": "input"
              },
              {
                "name": "TextArea Field",
                "value": "textarea"
              },
              {
                "name": "Radio Buttons",
                "value": "radio"
              },
              {
                "name": "Checkbox",
                "value": "checkbox"
              }
            ],
            "label": "Field Type",
            "required": true
          }
        },
        {
          "type": "input",
          "key": "investmentValue",
          "templateOptions": {
            "label": "Value:"
          },
          "expressionProperties": {
            "templateOptions.disabled": "!model.stockIdentifier"
          }
        },
        {
          "type": "checkbox",
          "model": "formState",
          "key": "selfExecuting",
          "templateOptions": {
            "label": "Are you executing this trade?"
          }
        },
        {
          "hideExpression": "!formState.selfExecuting",
          "fieldGroup": [
            {
              "type": "input",
              "key": "relationshipName",
              "templateOptions": {
                "label": "Name:"
              }
            },
            {
              "type": "select",
              "key": "complianceApprover",
              "templateOptions": {
                "label": "Compliance Approver:",
                "options": [
                  {
                    "name": "approver 1",
                    "value": "some one 1"
                  },
                  {
                    "name": "approver 2",
                    "value": "some one 2"
                  }
                ]
              }
            },
            {
              "type": "textarea",
              "key": "requestorComment",
              "templateOptions": {
                "label": "Requestor Comment",
                "rows": 4
              }
            }
          ]
        }
      ]
    }
  }
]