angular-formly-templates-bootstrap

Angular-Formly plugin which outputs bootstrap compatible form fields.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-formly-templates-bootstrap
111346.5.15 years ago8 years agoMinified + gzip package size for angular-formly-templates-bootstrap in KB

Readme

angular-formly: Bootstrap Template
Status: npm version npm downloads Build Status
This is a template for angular-formly which adds templates with classes specific to bootstrap. Each field is wrapped in a div. This library is not standalone and requires angular-formly to be present and loaded.

Demo http://angular-formly.com

Dependencies

  • Required to use these templates:
- angular - angular-formly - api-check
  • Dev dependencies to build Formly
- npm

Install in your project


  • Install angular-formly: Bootstrap Templates
$ bower install angular-formly angular-formly-templates-bootstrap --save
or
$ npm install angular-formly angular-formly-templates-bootstrap --save
  • Include the javascript file in your index.html, Formly comes in the following flavors:
<script src="bower_components/angular-formly/dist/formly.min.js"></script> <script src="bower_components/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script>
and
angular.module('yourModule', ['formly', 'formlyBootstrap']);
or
angular.module('yourModule', [require('angular-formly'), require('angular-formly-templates-bootstrap')]);

Documentation

See angular-formly for formly core documentation.

Common Properties

NOTE: All of these properties will be under the templateOptions property as of angular-formly 3.0.0
label (string)
>label is used to add an html label to each field.
Default
>undefined
labelSrOnly (boolean)
>labelSrOnly is used to add the sr-only class to a label so it will hide on non-screen-readers
Default
>undefined
required (boolean)
>required is used to add the required attribute to a form field.
Default
>undefined
disabled (boolean)
>disabled is used to add the disabled attribute to a form field.
Default
>undefined
placeholder (string)
>placeholder is used to add placeholder text to some inputs.
Default
>undefined
description (string)
>description is used to add descriptive text to all inputs.
Default
>undefined
addonLeft (object)
>addonLeft is used to add an add-on on the left of a field. The object accepts three properties: text that sets a simple text, onClick will add a cursor:pointer and an ng-click to the addon (invoked with the options and scope), and class that sets classes to the add-on.
Default
>undefined
addonRight (object)
>addonRight is used to add an add-on on the right of a field. The object accepts three properties: text that sets a simple text, onClick will add a cursor:pointer and an ng-click to the addon (invoked with the options and scope), and class that sets classes to the add-on.
Default
>undefined

Fields

Form Fields

Below is a detailed description of each form fields and its custom properties.

Input form field

>The input uses the element and allows you to specify it's type via the type property
Example text field
{
  "type": "input",
  "key": "firstName",
  "templateOptions": {
    "type": "email", // or url, or text, etc.
    "placeholder": "jane doe",
    "label": "First name"
  }
}

Textarea form field

>The textarea field creates multiline input with a textarea element.
lines (number, optional)
>lines sets the rows attribute for the textarea element.
Example textarea field
{
  "type": "textarea",
  "key": "about",
  "templateOptions": {
    "placeholder": "I like puppies",
    "label": "Tell me about yourself",
    "rows": 4,
    "cols": 15
  }
}

Checkbox form field

>The checkbox field allows checkbox input with a input element set to type='checkbox'. It doesn't have any custom properties.
Example checkbox field
{
  "type": "checkbox",
  "key": "checkThis",
  "templateOptions": {
    "label": "Check this box"
  }
}

multiCheckbox form field

>The multiCheckbox field allows to have a set of checkboxes which will be bind to a provided model value.
options (array, required)
>options is an array of options for the multiCheckbox form field to display. Each option should be an object.
labelProp (string, optional)
>labelProp is what is used for what is shown to the user. Defaults to name
valueProp (string, optional)
>valueProp is what is used for the value assigned to the model. Defaults to value
Example multiCheckbox field
{
  key: 'roles',
  type: 'multiCheckbox',
  templateOptions: {
    label: 'Roles',
    options: [{id: 1, title : "Administrator"}, {id: 2, title : "User"}],
    valueProp: 'id',
    labelProp: 'title'
  }
}

Example multiCheckbox field with async options
{
  key: 'roles',
  type: 'multiCheckbox',
  templateOptions: {
    label: 'Roles',
    options: [],
    valueProp: 'id',
    labelProp: 'title'
  },
  controller: function($scope, DataService) {
    DataService.getRoles().then(function(roles){
      // roles: [{id: 1, title : "Administrator"}, {id: 2, title : "User"}]
       $scope.to.options = roles;
    });
  }
}
---

Radio form field

>The radio field allows multiple choice input with a series of linked inputs, with type='radio'.
options (array, required)
>options is an array of options for the radio form field to display. Each option should be an object with a name(string) and value(string or number).
Example radio field
{
  "key": "triedEmber",
  "type": "radio",
  "templateOptions": {
    "label": "Have you tried EmberJs yet?",
    "options": [
      {
        "name": "Yes, and I love it!",
        "value": "yesyes"
      },
      {
        "name": "Yes, but I'm not a fan...",
        "value": "yesno"
      },
      {
        "name": "Nope",
        "value": "no"
      }
    ]
  }
}

Select form field

>The select field allows selection via dropdown using the select element.
options (array, required)
>options is an array of options for the select form field to display. Each option should be an object with a name(string). You may optionally add a group to some or all of your options.
labelProp (string, optional)
>labelProp is what is used for what is shown to the user. Defaults to name
valueProp (string, optional)
>valueProp is what is used for the value assigned to the model. Defaults to value
groupProp (string, optional)
>groupProp is what is used to group the options
optionsAttr (string, optional)
>optionsAttr is what is used as the attribute ngOptions will be applied to. Defaults to ng-options
notNull (boolean, optional)
>notNull whether to add an empty null option
nullDisplay (string, optional)
>nullDisplay Null option label
ngOptions (string, optional)
>If provided, this is used instead of the default ng-options giving you full control (and rendering the other options uncessisary.
Example
Example select field
{
  "key": "transportation",
  "type": "select",
  "templateOptions": {
    "label": "How do you get around in the city",
    "valueProp": "name",
    "options": [
      {
        "name": "Car"
      },
      {
        "name": "Helicopter"
      },
      {
        "name": "Sport Utility Vehicle"
      },
      {
        "name": "Bicycle",
        "group": "low emissions"
      },
      {
        "name": "Skateboard",
        "group": "low emissions"
      },
      {
        "name": "Walk",
        "group": "low emissions"
      },
      {
        "name": "Bus",
        "group": "low emissions"
      },
      {
        "name": "Scooter",
        "group": "low emissions"
      },
      {
        "name": "Train",
        "group": "low emissions"
      },
      {
        "name": "Hot Air Baloon",
        "group": "low emissions"
      }
    ]
  }
}

Contributing

Please see the CONTRIBUTING Guidelines.

Thanks

A special thanks to Nimbly for creating/sponsoring angular-formly's development. Thanks to Kent C. Dodds for his continued support on the project.