LumX Templates for Angular-Formly. Modern & flexible forms configured easily in a JSON object.
bower install angular angular-formly lumx angular-messages angular-aria angular-formly-templates-lumx
angular.module('myAppName', [
'ngMessages',
'ngAria',
'formly',
'lumx',
'formlyLumx'
])
It's also recommended to add a link to ./styles/angular-formly-templates-lumx.css
.
Run the demo locally or view it on the site.
cd demo
bower install && npm install
npm start
. On windows: npm-start-win
Not much necessary. The form just requires the <formly-form>
directive tag. For example:
<!-- formly-form directive generates templates -->
<formly-form model="formData" fields="formFields"></formly-form>
<formly-form model="formData" fields="formFields" options="formOptions">
<br>
<button ng-click="submit()">Submit</button>
</formly-form>
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'
}
}];
}
Basic form elements.
Wrap around the form field to add additional functionality. See the Angular-formly docs on wrappers.
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
Use containers & flex-box to arrange your form fields into flexible rows & columns. See docs on lx-flex & lx-wrapper-flex-item.
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
}
}
}
Formly will now warn you in the console if you enter invalid data into your field options. Read more about apiCheck.
Validation messages can be set as defaults in the module file.
var VALIDATION_MESSAGES = [{
name: 'required',
message: 'This field is required'
}
Add or change your file in src/fields
.
Create a configuration in src/index.js
. For example:
{ name: 'checkbox', template: require('./fields/lx-checkbox.html'), apiCheck: function(check) { return { templateOptions: { label: check.string, description: check.string, checked: check.boolean, required: check.boolean } }; } }
Compile templates into /dist
. In the console, in the folder run npm install
to setup and webpack
to build.
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.
Link to this Plunker.