Skip to content
This repository has been archived by the owner. It is now read-only.
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Join the chat at

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


  1. Angular (@1.3+)
  2. Angular-Formly (@7.1)
  3. LumX Framework (@0.3+)
  4. ngMessages (@1.3+)

Getting Started

  1. Install dependencies (for example, with Bower (see Bower above)
  2. Add the following dependencies to your Angular module:
angular.module('myAppName', [

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.

  • 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


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">
       <button ng-click="submit()">Submit</button>


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.

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.

 		name: 'required',
 		message: 'This field is required'

Change / Generate your own templates

  1. Add or change your file in src/fields.

  2. 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 } }; } }

  3. Compile templates into /dist. In the console, in the folder run npm install to setup and webpack to build.


  • 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.

Post an Issue

Link to this Plunker.


LumX Templates for Angular-Formly




No packages published
You can’t perform that action at this time.