Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-formly-material

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-formly-material

Material design templates for angular-formly

  • 0.7.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
65
increased by47.73%
Maintainers
1
Weekly downloads
 
Created
Source

FormlyMaterial

GitHub version Build Status Codacy Badge

Material Design Templates for Angular-Formly. Modern & flexible forms configured easily in a JSON object.

Install

npm install angular-formly-material
bower install angular-formly-material
meteor add wieldo:angular-formly-templates-material

Getting Started

  1. Add package using one of methods above
  2. Add the following dependencies to your AngularJS module:
angular.module('myAppName', [
    'formlyMaterial'
  ])

Requirements

  • angular ~ 1.4.0
  • angular-messages ~ 1.4.0
  • angular-material ~ 0.11.0
  • angular-formly ~ 7.3.0

Components

Any requests? Add issue!

Common properties

label (string)

theme (string)

md-theme attribute

Fields

input

{
  "type": "input",
  "key": "firstName",
  "templateOptions": {
    "type": "text",
    "label": "First name",
    "theme": "custom"
  }
}

textarea

rows (number, optional)

{
  "type": "textarea",
  "key": "bio",
  "templateOptions": {
    "label": "Biography",
    "theme": "custom",
    "rows": 5
  }
}

radio

options (array, requred)

labelProp (string, optional)

valueProp (string, optional)

{
  "type": "radio",
  "key": "name",
  "templateOptions": {
    "label": "Name",
    "theme": "custom",
    "labelProp": "firstName",
    "valueProp": "id",
    "options": [
        {"firstName": "Sarah", id: 1},
        {"firstName": "Jessica", id: 2},
        {"firstName": "Parker", id: 3}
    ]
  }
}

select

options (array, requred)

labelProp (string, optional)

valueProp (string, optional)

multiple (boolean, optional)

{
  "type": "select",
  "key": "name",
  "templateOptions": {
    "label": "Name",
    "theme": "custom",
    "multiple": true,
    "labelProp": "firstName",
    "valueProp": "id",
    "options": [
        {"firstName": "Sarah", id: 1},
        {"firstName": "Jessica", id: 2},
        {"firstName": "Parker", id: 3}
    ]
  }
}

checkbox

{
  "type": "checkbox",
  "key": "terms",
  "templateOptions": {
    "label": "Terms and Conditions",
    "theme": "custom"
  }
}

switch

{
  "type": "switch",
  "key": "terms",
  "templateOptions": {
    "label": "Terms and Conditions",
    "theme": "custom"
  }
}

datepicker

placeholder (string, optional)

md-placeholder

minDate (Date, optional)

md-min-date

maxDate (Date, optional)

md-max-date

filterDate (function, optional)

md-filter-date

{
  "type": "datepicker",
  "key": "start",
  "templateOptions": {
    "theme": "custom",
    "placeholder": "Start date",
    "minDate": minDate, // instance of Date
    "maxDate": maxDate, // instance of Date
    "filterDate": function(date) {
        // only weekends
        var day = date.getDay();
        return day === 0 || day === 6;
    }
  }
}

chips

placeholder (string, optional)

placeholder attribute value

secondaryPlaceholder (string, optional)

secondary-placeholder attribute value

deleteButtonLabel (string, optional)

delete-button-label attribute value

deleteHint (string, optional)

delete-hint attribute value

{
  "type": "chips",
  "key": "tags",
  "templateOptions": {
    "theme": "custom",
    "placeholder": "+tags",
    "secondaryPlaceholder": "Add tag",
    "deleteButtonLabel": "Remove",
    "deleteHint": "Remove tag"
  }
}

slider

min (number, optional)

default 1

max (number, optional)

default 100

step (number, optional)

default 1

discrete (boolean, optional)

default false (md-discrete)

{
    "type": "slider",
    "key": "rate",
    "templateOptions": {
        "theme": "custom",
        "min": 1,
        "max": 5,
        "step": 0.5,
        "discrete": true
    }
}

Wrappers

  • inputContainer (md-input-container)
  • label
  • messages (ng-messages)

Roadmap

  • add md-chips
  • add md-datepicker
  • add md-icon wrapper
  • add md-slider with min, max, step and discrete options
  • add md-select
  • multiple in md-select
  • add groups to md-select
  • add valueProp, labelProp to md-select
  • add md-radio with valueProp and labelProp
  • add textarea with cols and rows
  • md-theme
  • e2e tests

Requests (?). Post an issue.

Keywords

FAQs

Package last updated on 29 Nov 2015

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc