npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-formly-templates-lumx

v1.5.2

Published

Angular-Formly templates based on the LumX Framework (Mirror)

Downloads

16

Readme

FormlyLumx

Join the chat at https://gitter.im/formly-js/angular-formly-templates-lumx

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

  1. Angular (@1.3+)
  2. Angular-Formly (@4.0)
  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.

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.