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.
-
Required to use these templates:
-
angular
-
angular-formly
-
api-check
-
Dev dependencies to build Formly
-
npm
-
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')]);
See angular-formly for formly core documentation.
NOTE: All of these properties will be under the templateOptions property as of angular-formly 3.0.0
labelis used to add an html label to each field.
undefined
labelSrOnlyis used to add the sr-only class to a label so it will hide on non-screen-readers
undefined
requiredis used to add the required attribute to a form field.
undefined
disabledis used to add the disabled attribute to a form field.
undefined
placeholderis used to add placeholder text to some inputs.
undefined
descriptionis used to add descriptive text to all inputs.
undefined
addonLeftis used to add an add-on on the left of a field. The object accepts three properties:textthat sets a simple text,onClickwill add acursor:pointerand an ng-click to the addon (invoked with the options and scope), andclassthat sets classes to the add-on.
undefined
addonRightis used to add an add-on on the right of a field. The object accepts three properties:textthat sets a simple text,onClickwill add acursor:pointerand an ng-click to the addon (invoked with the options and scope), andclassthat sets classes to the add-on.
undefined
Below is a detailed description of each form fields and its custom properties.
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"
}
}The textarea field creates multiline input with a textarea element.
linessets 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
}
}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"
}
}The multiCheckbox field allows to have a set of checkboxes which will be bind to a provided model value.
optionsis an array of options for the multiCheckbox form field to display. Each option should be an object.
labelPropis what is used for what is shown to the user. Defaults toname
valuePropis what is used for the value assigned to the model. Defaults tovalue
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;
});
}
}The radio field allows multiple choice input with a series of linked inputs, with
type='radio'.
optionsis an array of options for the radio form field to display. Each option should be an object with aname(string) andvalue(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"
}
]
}
}The select field allows selection via dropdown using the select element.
optionsis an array of options for the select form field to display. Each option should be an object with aname(string). You may optionally add agroupto some or all of your options.
labelPropis what is used for what is shown to the user. Defaults toname
valuePropis what is used for the value assigned to the model. Defaults tovalue
groupPropis what is used to group the options
optionsAttris what is used as the attribute ngOptions will be applied to. Defaults tong-options
notNullwhether to add an empty null option
nullDisplayNull option label
If provided, this is used instead of the default
ng-optionsgiving you full control (and rendering the other options uncessisary.
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"
}
]
}
}Please see the CONTRIBUTING Guidelines.
A special thanks to Nimbly for creating/sponsoring angular-formly's development. Thanks to Kent C. Dodds for his continued support on the project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent