• Stars
    star
    235
  • Rank 171,079 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JavaScript powered forms for Vue.js

Vue Formly

Looking for maintainers

It's been many years since I first created Vue Formly and it's been a great project. However, it was a project that started because I couldn't quite find anything that fit my requirements at the time. I've sinced moved on, things have changed, and I no longer have the time I need to keep working on this. So if you'd like to get on board or take it into Vue 3 support, you're most welcome.

About

Vue Formly is a JS based form builder heavily inspired by Angular Formly. Vue Formly was designed to provide an easy way to keep your forms consistent and to remove bloat from your code. As there's no "one way" to design your forms, Vue Formly allows you to create custom input types which you can use in your form schemas. Vue Formly itself does not come with any inputs pre-loaded but a set of Boostrap form inputs can be installed over at Vue Formly Bootstrap.

NOTE This is version 2 of Vue Formly and is only compatible with Vue 2.x. If you are wanting to use this with Vue 1.x then check out the Vue Formly 1 Branch.

Installation

npm install vue-formly

Or via a script

<script src="your_dir/vue-formly/vue-formly.min.js"></script>

Usage

Take a look at the docs for extended information about using Formly and creating custom input types. But here is a quick example: NOTE that for Vue Formly to work correctly you must also include a set of input types. You can either create your own or check out Vue Formly Bootstrap which has many already created for you.

<div id="app">
   <form @submit="handleSubmission">
      <formly-form :form="form" :model="model" :fields="fields"></formly-form>
      <button>Submit</button>
   </form>
</div>
new Vue({
   el: '#app',
   data: {
      model: {
         name: '',
         email: '',
         password: ''
      },
      form: {},
      fields: [
         {
            key: 'name',
            type: 'input',
            required: true
         },
         {
            key: 'email',
            type: 'input',
            templateOptions: {
               type: 'email'
            },
            required: true,
            validators: {
               validEmail: checkEmailFunction
            }
         },
         {
            key: 'password',
            type: 'input',
            templateOptions: {
               type: 'password'
            },
            required: true,
            validators: {
               validPassword: checkPasswordFunction
            }
         }
      ]
   }
});

More Repositories

1

angular-formly

JavaScript powered forms for AngularJS
JavaScript
2,240
star
2

angular-formly-templates-bootstrap

Angular-Formly: Bootstrap Templates
JavaScript
111
star
3

react-formly

JSON powered forms for react
JavaScript
104
star
4

angular-formly-templates-ionic

Angular-Formly: Ionic Framework Templates
HTML
86
star
5

angular-formly-templates-material

Angular-Formly: Material Templates
JavaScript
55
star
6

vue-formly-bootstrap

JavaScript
51
star
7

formly-builder

A builder application for formly-js for drag-and-drop form creation which outputs the necessary JSON for the form.
JavaScript
36
star
8

angular-formly-templates-lumx

LumX Templates for Angular-Formly
CSS
36
star
9

angular-formly-website

The website for angular-formly
JavaScript
18
star
10

ng-formly-nativescript

JavaScript powered FORMS for NATIVESCRIPT for Angular 2 and up
TypeScript
10
star
11

angular-formly-templates-foundation

Angular-Formly: Zurb Foundation Templates
JavaScript
8
star
12

angular-formly-json-schema

A plugin for angular-formly to allow you to pass a json-schema to formly instead of formly's custom config.
7
star
13

angular-formly-templates-vanilla

Angular-Formly: Vanilla Templates
JavaScript
6
star
14

ng-formly-template-material

ng2-formly Material2 template
TypeScript
6
star
15

ng2.angular-formly.com

Website for Angular Formly 2
HTML
2
star
16

angular-formly-example

An example application that uses angular-formly, mostly as a demonstration as well as a place to learn how to use protractor :-)
JavaScript
2
star
17

angular-formly-siren-action

angular-formly plugin for siren action
API Blueprint
2
star
18

angular-formly-dynamic-interpolate-symbols

Plugin for angular-formly which will convert templates that use {{ and }} into the start and end from $interpolate
JavaScript
2
star
19

angular-formly-simplified

An abstraction on top of angular-formly with a simplified API
1
star
20

ng2-formly-templates-bootstrap

Angular-Formly: Bootstrap Templates
1
star
21

ng-formly-ionic-templates

1
star