• This repository has been archived on 01/May/2018
  • Stars
    star
    111
  • Rank 314,510 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Angular-Formly: Bootstrap Templates

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

Sponsor

Dependencies

  • Required to use these templates:

  • angular

  • angular-formly

  • api-check

  • Dev dependencies to build Formly

  • npm

Install in your project

  • Install angular-formly

  • 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.

More Repositories

1

angular-formly

JavaScript powered forms for AngularJS
JavaScript
2,240
star
2

vue-formly

JavaScript powered forms for Vue.js
JavaScript
235
star
3

react-formly

JSON powered forms for react
JavaScript
104
star
4

angular-formly-templates-ionic

Angular-Formly: Ionic Framework Templates
HTML
86
star
5

angular-formly-templates-material

Angular-Formly: Material Templates
JavaScript
55
star
6

vue-formly-bootstrap

JavaScript
51
star
7

formly-builder

A builder application for formly-js for drag-and-drop form creation which outputs the necessary JSON for the form.
JavaScript
36
star
8

angular-formly-templates-lumx

LumX Templates for Angular-Formly
CSS
36
star
9

angular-formly-website

The website for angular-formly
JavaScript
18
star
10

ng-formly-nativescript

JavaScript powered FORMS for NATIVESCRIPT for Angular 2 and up
TypeScript
10
star
11

angular-formly-templates-foundation

Angular-Formly: Zurb Foundation Templates
JavaScript
8
star
12

angular-formly-json-schema

A plugin for angular-formly to allow you to pass a json-schema to formly instead of formly's custom config.
7
star
13

angular-formly-templates-vanilla

Angular-Formly: Vanilla Templates
JavaScript
6
star
14

ng-formly-template-material

ng2-formly Material2 template
TypeScript
6
star
15

ng2.angular-formly.com

Website for Angular Formly 2
HTML
2
star
16

angular-formly-example

An example application that uses angular-formly, mostly as a demonstration as well as a place to learn how to use protractor :-)
JavaScript
2
star
17

angular-formly-siren-action

angular-formly plugin for siren action
API Blueprint
2
star
18

angular-formly-dynamic-interpolate-symbols

Plugin for angular-formly which will convert templates that use {{ and }} into the start and end from $interpolate
JavaScript
2
star
19

angular-formly-simplified

An abstraction on top of angular-formly with a simplified API
1
star
20

ng2-formly-templates-bootstrap

Angular-Formly: Bootstrap Templates
1
star
21

ng-formly-ionic-templates

1
star