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

---

$3

``
npm install wieldoformlymaterial
``

$3

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

$3

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

$3

- [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

$3

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
~~~javascript
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
~~~html

signup

~~~

Donate

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