Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
angular-formly-templates-vanilla
Advanced tools
Readme
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.
Example text field:
<div>
<label for="{{id}}">
{{options.label || 'Text'}}
{{options.required ? '*' : ''}}
</label>
<input type="text"
id="{{id}}"
formly-dynamic-name="options.key"
formly-custom-validation="options.validators"
placeholder="{{options.placeholder}}"
aria-describedby="{{id}}_description"
ng-required="options.required"
ng-disabled="options.disabled"
ng-model="result[options.key || index]">
<p id="{{id}}_description" ng-if="options.description">{{options.description}}</p>
</div>
Required to use Formly:
Angular
Angular-Formly
Dev dependencies to build Formly
npm
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
<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')]);
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
label
is used to add an html label to each field.
A default is set for each field based on its type. ie
Text
,Checkbox
,Password
required
is used to add the required attribute to a form field.
undefined
hide
is used to conditionally show the input. When true, the input is hidden (meant to be used with a watch).
undefined
disabled
is used to add the disabled attribute to a form field.
undefined
placeholder
is used to add placeholder text to some inputs.
undefined
description
is used to add descriptive text to all inputs.
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": "text",
"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.
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
}
}
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",
"templateUrl": {
"label": "Check this box"
}
}
The radio field allows multiple choice input with a series of linked inputs, with
type='radio'
.
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"
}
]
}
}
The select field allows selection via dropdown using the select element.
The default can be set to the index of one of the
options
.
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"
}
]
}
}
The number field allows input that is restricted to numbers. Browsers also provide minimal ui to increase and decrease the current value.
min
sets minimum acceptable value for the input.
max
sets maximum acceptable value for the input.
Example number field
{
"key": "love",
"type": "number",
"templateOptions": {
"label": "How much love?",
"min": 0,
"max": 100,
"required": true
}
}
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.
FAQs
Angular-Formly plugin which outputs plain html form fields.
The npm package angular-formly-templates-vanilla receives a total of 6 weekly downloads. As such, angular-formly-templates-vanilla popularity was classified as not popular.
We found that angular-formly-templates-vanilla demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.