Wieldoformlymaterial NPM

formlyMaterial

Wieldo formly Material to build forms with angular-formly and angular material design formly - http://angular-formly.com/
material design 1.0.6 - https://material.angularjs.org/1.0.6/demo/input

How to install

npm install wieldoformlymaterial

npm

https://www.npmjs.com/package/wieldoformlymaterial

Demo

github - https://github.com/wieldo/meteor-app
real example - http://meteor-app.wieldo.com/developers/forms

You can generate by json formly Types

Checkbox
Chips
Datepicker
Input
Radio
Select
Slider
Switch
Textarea

Custom

Select Day
Select Month
Select Year

Tests

Karma Jasmine - http://jasmine.github.io/2.0/introduction.html

Checkbox
Chips
Datepicker
Input
Radio
Select
Slider
Switch
Textarea

Custom

Select Day
Select Month
Select Year

templateOptions

default

templateOptions	directive	attribute	type	apiCheck
ariaLabel	aria-label		String	string.optional
className		class	String	string.optional
disabled			Boolean	bool.optional
theme	md-theme		String	string.optional
ngClass	ng-class		Function	func.optional
ngClick	ng-click		Function	func.optional
ngDisabled	ng-disabled		Boolean	bool.optional
mdTheme	md-theme		String	string.optional

Click here to go for more information about templateOptions

Example

If you want to create simple signup form you can write javascript code below

fields = [
    {
        type: "input",
        key: "email",
        templateOptions: {
            type: "email",
            label: "Enter your email address",
            pattern: "/^.+@.+\..+$/",
            required: true
        },
        validation: {
            messages: {
                pattern: 'to.label + " pattern " + to.pattern + " is not correct"'
            }
        }
    },
    {
        type: "input",
        key: "password",
        templateOptions: {
            type: "password",
            label: "Enter your password",
            required: true
        }
    },
    {
        type: "input",
        key: "firstname",
        templateOptions: {
            label: "Enter your firstname",
            required: true
        }
    },
    {
        type: "input",
        key: "lastname",
        templateOptions: {
            type: "text",
            label: "Enter your lastname",
            required: true
        }
    }
]

with html in your view

<form name="form" ng-submit="onSubmit()">
    <formly-form model="model" fields="fields" options="options">
        <md-button type="submit" class="md-primary md-raised">
            signup
        </md-button>
    </formly-form>
</form>