angular-formly-templates-lumx
v1.5.2
Published
Angular-Formly templates based on the LumX Framework (Mirror)
Downloads
16
Readme
FormlyLumx
LumX Templates for Angular-Formly. Modern & flexible forms configured easily in a JSON object.
Currently 1.5.2
Setup
Bower
bower install angular angular-formly lumx angular-messages angular-aria angular-formly-templates-lumx
Dependencies
- Angular (@1.3+)
- Angular-Formly (@4.0)
- LumX Framework (@0.3+)
- ngMessages (@1.3+)
Getting Started
- Install dependencies (for example, with Bower (see Bower above)
- Add the following dependencies to your Angular module:
angular.module('myAppName', [
'ngMessages',
'ngAria',
'formly',
'lumx',
'formlyLumx'
])
It's also recommended to add a link to ./styles/angular-formly-templates-lumx.css
.
Demo
Run the demo locally or view it on the site.
- clone this github repo
- go into the demo directory
cd demo
- download packages
bower install && npm install
- run Webpack
npm start
. On windows:npm-start-win
View
Not much necessary. The form just requires the <formly-form>
directive tag. For example:
#####Basic Setup
<!-- formly-form directive generates templates -->
<formly-form model="formData" fields="formFields"></formly-form>
#####With Submit & Options
<formly-form model="formData" fields="formFields" options="formOptions">
<br>
<button ng-click="submit()">Submit</button>
</formly-form>
Controller
Add your formData & formFields onto a controller.
angular.module('myAppName').controller('FormCtrl', FormCtrl);
function FormCtrl ($scope) {
$scope.formData = {}; // the data object
$scope.formOptions = {}; // optional form parameters
$scope.formFields = [{ // an array holding all form fields
key: 'email', // ng-model name, saved in formData
type: 'lx-input', // field
templateOptions: { // in this case: 'lx-input' options
type: 'email'
label: 'Email'
}
}];
}
Components
Fields
Basic form elements.
- lx-input (text | email | password | number | url)
- lx-textarea
- lx-switch
- lx-checkbox
- lx-radio
- lx-date-picker
- lx-select
- lx-flex
Wrappers
Wrap around the form field to add additional functionality. See the Angular-formly docs on wrappers.
Error Handling
Use ngMessages to dynamically add an array of error messages.
$scope.formFields = {
validation: {
messages: [{
name: 'required',
message: 'This field is required.'
}]
}
};
Read more about lx-wrapper-errors
Flex-Box Grids
Use containers & flex-box to arrange your form fields into flexible rows & columns. See docs on lx-flex & lx-wrapper-flex-item.
Example: Email & Password
Create form fields by attaching a JSON-like object in the controller.
$scope.formFields= [{
key: 'email', // {
type: 'lx-input',
wrapper: 'lx-wrapper-errors', // error handling with ngMessages
templateOptions: {
type: 'email', // input type: [email | password | text | url | number]
label: 'Email',
required: true
},
validation: {
messages: {
email: function (viewValue, modelValue, scope) {
return 'That doesn\'t look like a valid email.'
}
}
}
},{
key: 'password',
type: 'lx-input',
wrapper: 'lx-wrapper-errors',
templateOptions: {
type: 'password',
label: 'Password',
minlength: 4,
maxlength: 16,
required: true
},
ngModelAttrs: {
minlength: {
bound: 'ng-minlength',
attribute: 'minlength'
},
maxlength: {
bound: 'ng-maxlength',
attribute: 'maxlength'
}
},
modelOptions: {
allowInvalid: true,
updateOn: 'default blur keydown',
debounce: {
keydown: 0,
default: 0,
blur: 0
}
}
}
ApiCheck Validation (new with 1.2)
Formly will now warn you in the console if you enter invalid data into your field options. Read more about apiCheck.
Validation Message Defaults (new with 1.2)
Validation messages can be set as defaults in the module file.
var VALIDATION_MESSAGES = [{
name: 'required',
message: 'This field is required'
}
##Roadmap
more advanced examples
e2e tests
Requests (?). Post an issue.
Known Issues
LumX has a conflict with a similarly complete framework, Bootstrap, resulting in errors for dropdowns including "lx-select" & "lx-multiple-select". Solution: choose one css framework or the other.