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

• [x] Checkbox
• [x] Chips
• [x] Datepicker
• [x] Input
• [x] Radio
• [x] Select
• [x] Slider
• [x] Switch
• [x] Textarea

Custom

• [x] Select Day
• [x] Select Month
• [x] Select Year

Tests

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

• [x] Checkbox
• [x] 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>

Donate

If you want to help our developers create software donate please.