FormlyLumx

LumX Templates for Angular-Formly. Modern & flexible forms configured easily in a JSON object.

• View demo.
• See the docs for template APIs.
• See the changelog for details.
• See guidelines about contributing or posting an issue

Setup

Bower

bower install angular angular-formly lumx angular-messages angular-aria angular-formly-templates-lumx

Dependencies

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', [
    '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'
}

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.

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

Post an Issue

Link to this Plunker.