Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
angular-formly-templates-ionic
Advanced tools
Angular-Formly plugin which outputs plain html form fields.
This is a template for angular-formly and Ionic. This library is not standalone and requires angular-formly to be present and loaded.
$ bower install api-check angular-formly angular-formly-templates-ionic --save
Reference the files in your index.html
<!-- right below ionic.bundle.js -->
<script src="lib/api-check/dist/api-check.js"></script>
<script src="lib/angular-formly/dist/formly.js"></script>
<script src="lib/angular-formly-templates-ionic/dist/angular-formly-templates-ionic.js"></script>
Then import the templates into your project.
angular.module('myApp', ['ionic', 'formlyIonic'])
And your're ready!
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.
undefined
required
is used to add the required attribute to a form field.
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
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 acursor:pointer
and an ng-click to the addon (invoked with the options and scope), andclass
that sets classes to the add-on.
undefined
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 acursor:pointer
and an ng-click to the addon (invoked with the options and scope), andclass
that 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. Currently Ionic template does not support label on input type, use placeholder instead. the 'type' property inside of templateOptions can be text, email, password, etc..
Example text field
{
"type": "input",
"key": "firstName",
"templateOptions": {
"type": "email",
"placeholder": "jane doe",
"icon": "ion-person",
"iconPlaceholder": true
}
}
The textarea field creates multiline input with a textarea element. Currently Ionic template does not support label on input type, use placeholder instead.
lines
sets the rows attribute for the textarea element.
Example textarea field
{
"type": "textarea",
"key": "about",
"templateOptions": {
"placeholder": "Cats make me smile",
"rows": 4
}
}
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 range can take in selected Ionicons as the min and max icons. You can also change the color by using another class. Label is also supported.
Example range field
{
"key": "volumeLevel",
"type": "range",
"templateOptions": {
"label": "Volume",
"rangeClass": "calm",
"min": "0",
"max": "100",
"step": "5",
"value": "25",
"minIcon": "ion-volume-low",
"maxIcon": "ion-volume-high"
}
}
The radio field allows choice input with a series of linked inputs, use
type='radio'
.
options
is an array of options for the radio form field to display. Each option should be an object with atext
(string or number) andvalue
(string or number). You can also override the icon that is diplayed with the option by passing in the icon key with an Ionicon identifer.
Example radio field
{
"key": "triedEmber",
"type": "radio",
"templateOptions": {
"label": "Have you tried EmberJs yet?",
"options": [{
"value": "A",
"text": "A",
"icon": "ion-home"
}, {
"value": "B",
"text": "B",
}, {
"value": "C",
"text": "C",
}]
}
}
The select field allows selection via dropdown using the select element.
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
or 'id' to some or all of your options.
labelProp
is what is used for what is shown to the user. Defaults toname
valueProp
is what is used for the value assigned to the model. Defaults tovalue
groupProp
is what is used to group the options
Example select field
{
"key": "marvel3",
"type": "select",
"templateOptions": {
"label": "Select with custom name/value/group",
"options": [{
"label": "Iron Man",
"id": "iron_man",
"gender": "Male"
}, {
"label": "Captain America",
"id": "captain_america",
"gender": "Male"
}, {
"label": "Black Widow",
"id": "black_widow",
"gender": "Female"
}, {
"label": "Hulk",
"id": "hulk",
"gender": "Male"
}, {
"label": "Captain Marvel",
"id": "captain_marvel",
"gender": "Female"
}],
"groupProp": "gender",
"valueProp": "id",
"labelProp": "label"
}
}
Write tests
Move to gulp
FAQs
Angular-Formly plugin which outputs plain html form fields.
The npm package angular-formly-templates-ionic receives a total of 5 weekly downloads. As such, angular-formly-templates-ionic popularity was classified as not popular.
We found that angular-formly-templates-ionic 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.
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.