npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-formly-templates-vanilla

v3.0.1

Published

Angular-Formly plugin which outputs plain html form fields.

Downloads

6

Readme

Build Status Coverage Status

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 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",
      "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.