Skip to content

wieldo/formlyMaterial

Repository files navigation

DEPRECATED

Working on version for Angular 4+ here @ngx-form

formlyMaterial

GitHub version Build Status GitHub issues GitHub license Gitter join

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>

Donate

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

About

Wieldo formly Material to build forms with angular-formly and angular material design

Resources

License

Stars

Watchers

Forks

Packages

No packages published