This is a template for Angular-Formly which adds templates with classes specific to foundation. Each field is wrapped in a div. This library is not standalone and requires angular-formly to be present and loaded.
Project unmaintained
Feel free to file issues and pull requests, but it may be a while before anyone gets to them :-/ Forks are welcome.
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-foundation/dist/angular-formly-templates-foundation.min.js"></script>
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
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 two properties: text that sets a simple text 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 two properties: text that sets a simple text 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
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","templateOptions":{"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 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.
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 a name(string). You may optionally add a group to some or all of your options.
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"}]}}
A special thanks to Nimbly for creating/sponsoring Angular-Formly's development.
Thanks to Kent C. Dodds for his continued support on the project.
*Other Notes:
(Bootstrap vs Foundation Differences)
Our bootstrap templates are made to work with a class called help-block, Foundation 5 does not
have this class, but it is a useful class used on paragraph elements following an input and is
used to describe the input, but unlike a label it is usually underneath a text field and is easy
to implement and support has been left in Angular-Formly-Foundation.
You could add the following to your css override to use it:
Angular-Formly plugin which outputs foundation compatible form fields.
The npm package angular-formly-templates-foundation receives a total of 1 weekly downloads. As such, angular-formly-templates-foundation popularity was classified as not popular.
We found that angular-formly-templates-foundation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.It has 1 open source maintainer collaborating on the project.
Package last updated on 26 Feb 2016
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.