AutoFormly

Create Angular-Formly forms with automatic insert and update, and automatic reactive validation. Requires SimpleSchema or Collection2.

Installation

meteor add wieldo:autoformly

How to use it

Add autoFormly and angular-formly templates to your angular module.

angular.module('app', [
  'autoFormly',
  'formlyMaterial' // or other angular-formly templates
]);

Templates

As you can see above, I'm using angular-formly-templates-material which I also maintain. You can add it using meteor add formly:angular-formly-templates-material.

Be aware

Be aware that not all angular-formly templates have same API

It is not yet a stable version

If you found some mismatch with other templates, post an issue

auto-formly component

To insert or update collection

<auto-formly
    collection="vm.booksCollection"
    doc="vm.book"
    options="vm.options"
    on-success="vm.onSuccess"
    on-error="vm.onError">
    <button type="submit">Update</button>
</auto-formly>

• collection Mongo.Collection object
• doc document from collection (optional)
• options same object as in autoFormly.collection (to custom configuration and filtering) (optional)
• onSuccess callback with result of action as argument (optional)
• onError callback with error as argument (false if form contains errors on client-side) (optional)

Convert all schema fields

const fields = autoFormly.collection(BooksCollection);
// or
const fields = autoFormly.collection($meteor.collection(BooksCollection);
// or
const fields = autoFormly.schema(BooksSchema);

Save object to collection with validation error handling

const fields = autoFormly.collection(BooksCollection);

function submit(book) {
    $meteor.collection(BooksCollection)
        .save(book)
        .then(() => {
            // success
        })
        .catch(() => autoFormly.errors(BooksCollection, fields);
}

Convert all schema fields excluding one

const fields = autoFormly.schema(BooksSchema, {
    fields: {
        published: false
    }
});

Convert selected collection fields

const fields = autoFormly.collection(BooksCollection, {
    all: false,
    fields: {
        published: true,
        author: true,
        title: true
    }
});

Extend formly configuration for selected field

const fields = autoFormly.schema(BooksSchema, {
    all: false,
    fields: {
        published: true,
        author: {
            templateOptions: {
                label: "Written by"
            }
        }
    }
});

Helpers

We're currently working on three other packages that are very useful in autoFormly.

• formlyTransformer to simplify process of formly field transformation.
• formlyValidator to make validation easier (with built-in validators)
• formlyMaterial is a AngularJS module with Angular Material templates to use in angular-formly.

What is ready?

See examples above.

• creating formly fields with validators using collection or schema (autoFormly.collection(), autoFormly.schema())
• handling validation errors (autoFormly.errors() sets validation on form fields)

Take a look at this docs:

• autoFormly
• autoFormlyParsers

Contributing

It is a new project, at the beginning of development process.

Feel free to ask me anything.

You can help

If you would like to add functionality, just fork this repo and create pull request.

How autoFormly works

Basically it parses simpleSchema structure and creates formly configuration for each field.

For example, to mark field as required we can create the parser function to check if optional property is being used. If opional is not set to true then we're adding required validator from wieldo:angular-formly-validator package (see formlyValidator and source code in required.js.

What is parser?

Parser is a function that receives simpleSchema key with configuration and reference of formly field configuration object.

So basically, you can add properties to formly configuration by checking field's schema.

Roadmap 1.0

• Component to automate process of insertion or collection update
• schema.minCount and schema.maxCount support
• Support for Object type fields
• Support for array of objects
• Interactive demo
• Extend SimpleSchema to use autoformly property
• Add optional manual formly configuration for each field
• More advanced field filtering (show all / hide all / add excluding)
• schema.key as formly.key
• schema.label as formly.templateOptions.label
• schema.optional and required validator
• schema.max for String and Number types as maxlength and maxnumber validator
• schema.min for String and Number types as minlength and minnumber validator
• schema.regEx as pattern validator
• schema.defaultValue as formly.defaultValue
• schema.autoformly.templateOptions.rows to be displayed as textarea
• Boolean type as checkbox
• schema.autoformly.type to be formly.type
• schema.allowedValues as select element (schema type is a String)
• validation for schema.allowedValues
• Support for Date type fields with min and max
• Support for server-side validation errors (like unique)

Contact

You can find me on Gitter.