angular-formly-templates-vanilla
v3.0.1
Published
Angular-Formly plugin which outputs plain html form fields.
Downloads
6
Readme
Angular-Formly: Vanilla Template
This is a template for Angular-Formly which adds template basic files with no css classes. Each field is wrapped in a div. This library is not standalone and requires angular-formly to be present and loaded.
NOTICE: UPGRADING FROM 2.0 to 3.0?
There were some significant changes that you'll want to be aware of. In order to upgrade and get all the cool features, you're going to need to change your field configurations. Here is a tool that should help make that process easier. Also, if you are not able to update the configuration very easily, see this issue for ideas on how to ease things a little.
Demo http://formly-js.github.io/angular-formly
Dependencies
Required to use Formly:
Angular
Angular-Formly
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-vanilla --save
or
$ npm install angular-formly angular-formly-templates-vanilla --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-vanilla/dist/angular-formly-templates-vanilla.min.js"></script>
and
angular.module('yourModule', ['formly', 'formlyVanilla']);
or
angular.module('yourModule', [require('angular-formly'), require('angular-formly-templates-vanilla')]);
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
A default is set for each field based on its type. ie
Text
,Checkbox
,Password
required (boolean)
required
is used to add the required attribute to a form field.
Default
undefined
hide (boolean)
hide
is used to conditionally show the input. When true, the input is hidden (meant to be used with a watch).
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
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
default (string, optional)
Example text field
{
"type": "text",
"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.
default (string, optional)
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.
default (boolean, optional)
Example checkbox field
{
"type": "checkbox",
"key": "checkThis",
"templateUrl": {
"label": "Check this box"
}
}
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 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"
}
]
}
}
Select form field
The select field allows selection via dropdown using the select element.
default (number, optional)
The default can be set to the index of one of the
options
.
options (array, required)
options
is an array of options for the select form field to display. Each option should be an object with aname
(string). You may optionally add agroup
to some or all of your options.
Example select field
{
"key": "transportation",
"type": "select",
"templateOptions": {
"label": "How do you get around in the city",
"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.